非插件实现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格式的），类似于下面的这张图片。 相关文章 误删除WordPress文章如何恢复 快速救援误操作WordPress内容 今天看到群友突然滴滴滴的找我QQ，好像出什么大事情一样。原... 修改WordPress默认登录地址 减少爬虫抓取降低占用资源 今天遇到一个网友提示网站访问速度比较慢，然后通知日志看到... WordPress提示"There has been a critical error on this website."问题解决方法 今天老左在帮助客户升级WordPress的时候我看他网站也比较简单... 解决WordPress文章标题"-"分隔符被转义的问题 我们在使用WordPress搭建的网站是否有留意查看源代码的时候看... wordPress上传.webp格式文件的插件：File Upload Types WordPress默认是无法上传.webp格式的文件，如果要上传需要对... WordPress 多语言插件：GTranslate 详细介绍 GTranslate 是一个流行的翻译插件，在免费和付费版本中提供不... Copyright © 2018 编程之家. 当前版本 V7.0.16 编程之家 版权所有 闽ICP备13020303号-8