lazyload 是一个 jQuery 插件，它可以延迟加载长页面中的图片。 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置。在包含很多大图片的长页面中，延迟加载图片可以加快页面加载速度，在某些情况下还可以帮助降低服务器负担。下面我们介绍一下如何使用此款 jQuery 插件在WordPress建站中实现图片延迟加载的效果。
1. 下载 lazyload 源代码, 将下载的压缩包解压，复制 jquery.min.js 和 jquery.lazyload.min.js, 放到自己的主题目录。
2. 切换到主题目录，打开header.php，引用 jquery.min.js和jquery.lazyload.min.js，详细的使用代码如下：
1 2 3 4 5 6 7 8 9 | <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> |
3. 还是在主题目录里，打开 functions.php 文件，增加下面的代码，代码的目的是自动为图片添加 data-original 属性，以便实现 lazyload 延迟加载效果。
1 2 3 4 5 6 7 8 | add_filter ('the_content', 'lazyload'); function lazyload($content) { $loadimg_url=get_bloginfo('template_directory').'/loading.gif'; if(!is_feed()||!is_robots) { $content=preg_replace('/<img(.+)src=[\'"]([^\'"]+)[\'"](.*)>/i',"<img\$1data-original=\"\$2\" src=\"$loadimg_url\"\$3>\n<noscript>\$0</noscript>",$content); } return $content; } |
4. 在主题的根目录里放入一个加载的图片（GIF格式的），类似于下面的这张图片。
支付宝扫码打赏 
微信打赏 
