非插件实现WordPress图片延迟加载效果 – lazyload

lazyload 是一个 jQuery 插件，它可以延迟加载长页面中的图片。 在浏览器可视区域外的图片不会被载入,直到用户将页面滚动到它们所在的位置。在包含很多大图片的长页面中，延迟加载图片可以加快页面加载速度，在某些情况下还可以帮助降低服务器负担。下面我们介绍一下如何使用此款 jQuery 插件在中实现图片延迟加载的效果。

1. 下载 lazyload 源代码,将下载的压缩包解压，复制 jquery.min.js 和 jquery.lazyload.min.js,放到自己的主题目录。

2. 切换到主题目录，打开header.PHP，引用 jquery.min.js和jquery.lazyload.min.js，详细的使用代码如下：

Crayon-5c891d521fe7b438215572" class="Crayon-Syntax Crayon-theme-classic Crayon-font-monaco Crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouSEOver" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">

Crayon-toolbar" data-settings=" mouSEOver overlay hide delay" style="font-size: 12px !important;height: 18px !important; line-height: 18px !important;">Crayon-title">header.PHP

Crayon-tools" style="font-size: 12px !important;height: 18px !important; line-height: 18px !important;">Crayon-mixed-highlight" title="Contains Mixed Languages">

Crayon-button Crayon-nums-button" title="Toggle Line Numbers">

Crayon-button-icon">

Crayon-button Crayon-plain-button" title="Toggle Plain Code">

Crayon-button-icon">

Crayon-button Crayon-wrap-button" title="Toggle Line Wrap">

Crayon-button-icon">

Crayon-button Crayon-expand-button" title="Expand Code">

Crayon-button-icon">

Crayon-button Crayon-copy-button" title="copy">

Crayon-button-icon">

Crayon-button Crayon-popup-button" title="Open Code In New Window">

Crayon-button-icon">

Crayon-info" style="min-height: 16.8px !important; line-height: 16.8px !important;">

Crayon-plain-wrap">Crayon</a>-plain print-no" data-settings="dblclick" readonly style="-moz-<a href="https://www.jb51.cc/tag/tabsize/" target="_blank" class="keywords">tab-size</a>:4; -o-<a href="https://www.jb51.cc/tag/tabsize/" target="_blank" class="keywords">tab-size</a>:4; -webkit-<a href="https://www.jb51.cc/tag/tabsize/" target="_blank" class="keywords">tab-size</a>:4; <a href="https://www.jb51.cc/tag/tabsize/" target="_blank" class="keywords">tab-size</a>:4; font-size: 12px !important; line-height: 15px !important;"> <script src="<?php echo get_template_directory_uri(); ?>/jquery.min.js" type="text/javascript"></script> <script src="<?php echo get_template_directory_uri(); ?>/jquery.lazyload.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function() { $("img").lazyload({ effect:"fadeIn" }); }); </script>

Crayon-main" style="">Crayon-table">Crayon-row">

Crayon-nums " data-settings="show"> Crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"> Crayon-num" data-line="Crayon-5c891d521fe7b438215572-1">1 Crayon-num Crayon-striped-num" data-line="Crayon-5c891d521fe7b438215572-2">2 Crayon-num" data-line="Crayon-5c891d521fe7b438215572-3">3 Crayon-num Crayon-striped-num" data-line="Crayon-5c891d521fe7b438215572-4">4 Crayon-num" data-line="Crayon-5c891d521fe7b438215572-5">5 Crayon-num Crayon-striped-num" data-line="Crayon-5c891d521fe7b438215572-6">6 Crayon-num" data-line="Crayon-5c891d521fe7b438215572-7">7 Crayon-num Crayon-striped-num" data-line="Crayon-5c891d521fe7b438215572-8">8 Crayon-num" data-line="Crayon-5c891d521fe7b438215572-9">9 Crayon-code"> Crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"> Crayon-line" id="Crayon-5c891d521fe7b438215572-1">Crayon-ta"> Crayon-line Crayon-striped-line" id="Crayon-5c891d521fe7b438215572-2">Crayon-ta"> Crayon-line" id="Crayon-5c891d521fe7b438215572-3">Crayon-ta"> 3. 还是在主题目录里，打开 functions.PHP 文件，增加下面的代码，代码的目的是自动为图片添加 data-original 属性，以便实现 lazyload 延迟加载效果。 Crayon-5c891d521fe8e597106700" class="Crayon-Syntax Crayon-theme-classic Crayon-font-monaco Crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouSEOver" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;"> Crayon-toolbar" data-settings=" mouSEOver overlay hide delay" style="font-size: 12px !important;height: 18px !important; line-height: 18px !important;">Crayon-title">functions.PHP Crayon-tools" style="font-size: 12px !important;height: 18px !important; line-height: 18px !important;"> Crayon-button Crayon-nums-button" title="Toggle Line Numbers"> Crayon-button-icon"> Crayon-button Crayon-plain-button" title="Toggle Plain Code"> Crayon-button-icon"> Crayon-button Crayon-wrap-button" title="Toggle Line Wrap"> Crayon-button-icon"> Crayon-button Crayon-expand-button" title="Expand Code"> Crayon-button-icon"> Crayon-button Crayon-copy-button" title="copy"> Crayon-button-icon"> Crayon-button Crayon-popup-button" title="Open Code In New Window"> Crayon-button-icon"> Crayon-info" style="min-height: 16.8px !important; line-height: 16.8px !important;"> Crayon-plain-wrap">Crayon</a>-plain print-no" data-settings="dblclick" readonly style="-moz-<a href="https://www.jb51.cc/tag/tabsize/" target="_blank" class="keywords">tab-size</a>:4; -o-<a href="https://www.jb51.cc/tag/tabsize/" target="_blank" class="keywords">tab-size</a>:4; -webkit-<a href="https://www.jb51.cc/tag/tabsize/" target="_blank" class="keywords">tab-size</a>:4; <a href="https://www.jb51.cc/tag/tabsize/" target="_blank" class="keywords">tab-size</a>:4; font-size: 12px !important; line-height: 15px !important;"> add_filter ('the_content','lazyload'); function lazyload($content) { $loadimg_url=get_bloginfo('template_directory').'/loading.gif'; if(!is_<a href="https://www.jb51.cc/tag/Feed/" target="_blank" class="keywords">Feed</a>()||!is_robots) { $content=preg_replace('/<img(.+)src=[\'"]([^\'"]+)[\'"](.*)>/i',"<img\$1data-original=\"\$2\" src=\"$loadimg_url\"\$3>\n<noscript>\$0</noscript>",$content); } return $content; } Crayon-main" style="">Crayon-table">Crayon-row"> Crayon-nums " data-settings="show"> Crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"> Crayon-num" data-line="Crayon-5c891d521fe8e597106700-1">1 Crayon-num Crayon-striped-num" data-line="Crayon-5c891d521fe8e597106700-2">2 Crayon-num" data-line="Crayon-5c891d521fe8e597106700-3">3 Crayon-num Crayon-striped-num" data-line="Crayon-5c891d521fe8e597106700-4">4 Crayon-num" data-line="Crayon-5c891d521fe8e597106700-5">5 Crayon-num Crayon-striped-num" data-line="Crayon-5c891d521fe8e597106700-6">6 Crayon-num" data-line="Crayon-5c891d521fe8e597106700-7">7 Crayon-num Crayon-striped-num" data-line="Crayon-5c891d521fe8e597106700-8">8 Crayon-code"> Crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"> Crayon-line" id="Crayon-5c891d521fe8e597106700-1">Crayon-e">add_filterCrayon-h"> Crayon-sy">(Crayon-s">'the_content'Crayon-sy">,Crayon-h"> Crayon-s">'lazyload'Crayon-sy">)Crayon-sy">; Crayon-line Crayon-striped-line" id="Crayon-5c891d521fe8e597106700-2">Crayon-t">functionCrayon-h"> Crayon-e">lazyloadCrayon-sy">(Crayon-sy">$Crayon-v">contentCrayon-sy">)Crayon-h"> Crayon-sy">{ Crayon-line" id="Crayon-5c891d521fe8e597106700-3">Crayon-h">Crayon-sy">$Crayon-v">loadimg_urlCrayon-o">=Crayon-e">get_bloginfoCrayon-sy">(Crayon-s">'template_directory'Crayon-sy">)Crayon-sy">.Crayon-s">'/loading.gif'Crayon-sy">; Crayon-line Crayon-striped-line" id="Crayon-5c891d521fe8e597106700-4">Crayon-h">Crayon-st">ifCrayon-sy">(Crayon-o">!Crayon-e">is_FeedCrayon-sy">(Crayon-sy">)Crayon-o">||Crayon-o">!Crayon-v">is_robotsCrayon-sy">)Crayon-h"> Crayon-sy">{ Crayon-line" id="Crayon-5c891d521fe8e597106700-5">Crayon-h">Crayon-sy">$Crayon-v">contentCrayon-o">=Crayon-e">preg_replaceCrayon-sy">(Crayon-s">'//i'Crayon-sy">,Crayon-s">"\n"Crayon-sy">,Crayon-sy">$Crayon-v">contentCrayon-sy">)Crayon-sy">; Crayon-line Crayon-striped-line" id="Crayon-5c891d521fe8e597106700-6">Crayon-h">Crayon-sy">} Crayon-line" id="Crayon-5c891d521fe8e597106700-7">Crayon-h">Crayon-st">returnCrayon-h"> Crayon-sy">$Crayon-v">contentCrayon-sy">; Crayon-line Crayon-striped-line" id="Crayon-5c891d521fe8e597106700-8">Crayon-sy">} 4. 在主题的根目录里放入一个加载的图片（GIF格式的），类似于下面的这张图片。 版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [e-mail] 举报，一经查实，本站将立刻删除。 相关推荐 误删除WordPress文章如何恢复 快速救援误操作WordPress内容 今天看到群友突然滴滴滴的找我QQ，好像出什么大事情一样。原来他由于误操作导致网站文章被删除。 修改WordPress默认登录地址 减少爬虫抓取降低占用资源 今天遇到一个网友提示网站访问速度比较慢，然后通知日志看到有他的网站WordPress默认登录地址wp-login.php一直在被爬虫抓取，因为是有被破解后台账户信息，导致的占用数据库资源使得网站资源带宽不足后访问降低导致 WordPress提示"There has been a critical error on this website."问题解决方法 今天老左在帮助客户升级WordPress的时候我看他网站也比较简单就直接在后台手工升级的。升级后打开网站有出现"There has been a critical error on your website."的错误提示。 解决WordPress文章标题"-"分隔符被转义的问题 我们在使用WordPress搭建的网站是否有留意查看源代码的时候看到标题中的原本"-"，被转义成"&#8211"。其实这样并不影响用户阅读体验和搜索引擎，搜索引擎在收录后也会反向转义的。就是感觉看 wordPress上传.webp格式文件的插件：File Upload Types WordPress默认是无法上传.webp格式的文件，如果要上传需要对上传文件限制进行解除后才能上传。 WordPress 多语言插件：GTranslate 详细介绍 GTranslate 是一个流行的翻译插件，在免费和付费版本中提供不同的体验。 使用免费版本，您可以轻松提供任何语言的动态翻译，而付费版本提供可索引、可编辑的翻译版本，就像 Weglot 一样。 wordpress网站广告屏蔽替换显示图片提醒的实用方法 时下主流的浏览器都自带了广告屏蔽功能，还有ADSafe、ADB等软件插件，不断更新，屏蔽网站代码！ 7个最佳wordPress显示数据的表格插件 您是否正在寻找可用于显示数据的 WordPress 表格插件？ WordPress 表格插件可让您以表格格式存储和呈现数据，以方便访问者阅读。 WordPress数据库中未使用的表如何删除？ wordPress数据库除了本身的表以外，部分插件会增加表来存储数据。如果插件已经删除了，这些插件生成的表还在数据库中，那么怎么删除呢？ WordPress隐藏后台登录地址的最简单的方法 WordPress几乎是世界上最安全的开源程序，但其后台登录注册的地址始终是众所周知的，所以不少人觉得隐藏WordPress的登录地址后可能会更加安全。下面浩子就针对这个问题来简单说明一下方法。WordPress隐藏后台登录地址 WordPress 使用 Classic Widgets 插件恢复经典小工具 自 WordPress 5.8 正式版发布 以后，后台的小工具就默认是块编辑器的界面样式，很多老用户还没有来得及学习就一脸茫然了，今天浩子就来教大家如何恢复WordPress经典小工具。 如何翻译WordPress插件？海外WordPress插件翻译 您想用您的语言翻译 WordPress 插件吗？许多 WordPress 插件是完全可翻译的，世界上任何人都可以轻松翻译。在本文中，我们将向您展示如何轻松地将 WordPress 插件翻译成您的语言（无需任何代码）。 WordPress开启 WP_DEBUG 调试模式的方法 WordPress新手不清楚WordPress调试模式怎么开启，今天来教大家认识和开启。什么是WordPress的调试模式 WordPress外观-自定义报错解决：Uncaught Exception: Supplied nav_menu_item.. 最近不少用户反馈说WordPress后台的外观-自定义点开后直接报错，错误信息如下： wordpress 禁用历史修订版本、自动保存和自动草稿功能。wordpress 禁用历史修订版本、自动保存和自动草稿功能。 我们先来看看解释。 版本修订历史（Post Revisions）是在文章发布后，每次点击“更新”时向数据库添加一条版本修订历史记录。这种方式和wiki很像。会导致数据库臃肿，文 phpmyadmin导入sql文件失败，502 Bad Gateway错误解决办法 前段时间迁移网站的时候，需要导入 sql 文件，小编用的是phpmyadmin管理工具，无论是从本地上传.sql.zip 文件，还是从网站服务器上文件夹 upload 下选择 sql 文件，都上传失败，皆以 502 Bad Gateway 告终。因为时间 wordpress的sitemap地图常见报错 (Error on line 1 at column 6: XML declaration allowed only at the start of the doc WordPress程序报错的问题报错代码如下：This page contains the following errors:error on line 1 at column 6: XML declaration allowed only at the start of the documentBelow is a rendering of the page up t DedeCMS文章数据一键迁移到WordPress系统 DedeCMS织梦系统是国内的优秀开源建站系统，使用的网站数量众多，不过近期织梦也要开始收取授权费用了：除个人非盈利网站外，均需要购买DedeCMS商业使用授权，授权费为5800元。 wordpress生成XML站点地图代码 PHP版本wp生成xml地图代码 WordPress生成XML站点地图的方法有很多，归纳总结一下，大致可以通过WordPress插件、在线生成软件或网站、PHP代码等三种方法实现，各有利弊，就看WordPress开发者怎么选择。 wordpress使用 wp_cache_get 获取缓存失效 开发主题时使用了wordpress的缓存函数，如下所示代码，但是在打印缓存时，怎么显示的都是false，经过查找才了解到。默认情况下，对象缓存是非持久的。这意味着存储在缓存中的数据仅在请求期间驻留在内存中。除非您安装持久缓存插件，否则缓存数据不会在页面加载时持久存储。就这个意思，想持久就需要找个插件装上。function get_term_post($term_id){if($term_id &l 热门文章 • 误删除WordPress文章如何恢复 快速救援… • 修改WordPress默认登录地址 减少爬虫抓… • WordPress提示"There has been a c… • 解决WordPress文章标题"-"分隔… • wordPress上传.webp格式文件的插件：Fi… • WordPress 多语言插件：GTranslate 详… • wordpress网站广告屏蔽替换显示图片提醒… • 7个最佳wordPress显示数据的表格插件 • WordPress数据库中未使用的表如何删除？ • WordPress隐藏后台登录地址的最简单的方… 最新文章 • 误删除WordPress文章如何恢复 快速救援… • 修改WordPress默认登录地址 减少爬虫抓… • WordPress提示"There has been a c… • 解决WordPress文章标题"-"分隔… • wordPress上传.webp格式文件的插件：Fi… • WordPress 多语言插件：GTranslate 详… • wordpress网站广告屏蔽替换显示图片提醒… • 7个最佳wordPress显示数据的表格插件 • WordPress数据库中未使用的表如何删除？ • WordPress隐藏后台登录地址的最简单的方… 热门标签更多 友情链接: 前端之家 ai导航 编程之家 - 我要投稿 - 广告合作 - 联系我们 - 免责声明 - 网站地图 版权所有 © 2018编程之家闽ICP备13020303号-8 微信公众号搜"智元新知"关注 微信扫一扫可直接关注哦！