之前《jQuery实现图片延迟加载》一文的方法，其实图片并未真正实现延迟加载，只是在窗口滚动到图片位置时才显示图片而已，是个假像。目前这个图片延迟加载插件 jquery.lazyload.js已更新，最新版本是1.9.3，并给出真正实现图片延迟加载的方法。
新版 jquery.lazyload.js 插件，要求必须给图片地址添加一个data-original属性，
- <img class="lazy" data-original="img/example.jpg" width="640" height="480">
有占位图的写法：
- <img class="lazy" src="img/lazy.gif" data-original="img/example.jpg" width="640" height="480">
这样才能启用延迟加载。说明请到官网查看：Lazy Load Plugin for jQuery
具体实现方法：
一、添加必要的JS文件
首先下载相关JS文件，并放到主题“js”文件夹中
将下面代码添加到主题头部header.php模板中：
展开代码
展开收缩
- <script src="<?php echo get_template_directory_uri(); ?>/js/jquery.min.js" type="text/javascript"></script>
- <script src="<?php echo get_template_directory_uri(); ?>/js/jquery.lazyload.min.js" type="text/javascript"></script>
- <script type="text/javascript">
- $(function() {
- $("img").lazyload({
- effect:"fadeIn"
- });
- });
- </script>
二、为图片自动添加 data-original 属性
按官网的要求插入图片时必须添加一个data-original属性，手动添加很麻烦，还好有人已提供自动为图片添加data-original 属性的方法，将下面代码添加到主题 functions.php 中：
展开代码
展开收缩
- add_filter ('the_content', 'lazyload');
- function lazyload($content) {
- $loadimg_url=get_bloginfo('template_directory').'/img/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;
- }
将一张加载动画图片放到主题图片文件夹img中
另外，Wordpress头像延迟加载，可以用下面的代码：
展开代码
展开收缩
- <?php echo '<img class="avatar" src="' . get_bloginfo('template_directory') . '/img/loading.gif" alt="avatar" data-original="' . preg_replace(array('/^.+(src=)(\"|\')/i', '/(\"|\')\sclass=(\"|\').+$/i'), array('', ''), get_avatar( $comment, '64' )) . '" />'; ?>
替换gravatar头像调用标准函数：
- <?php echo get_avatar( $comment, '32' ); ?>
也同样可以实现Wordpress头像延迟加载。
优点：只有浏览到图片位置时才加载图片，可以提高多图片页面的加载速度，减轻服务器负担。
缺点：可能会影响到搜索引擎对图片的收录，还有就是部分浏览器打开页面会出现空白...
具体效果看下页的图片延迟加载演示：
本站文章大部分为原创，用于个人学习记录，可能对您有所帮助，仅供参考！
我的微信
微信号已复制
版权声明
本站原创文章转载请注明文章出处及链接，谢谢合作！
1F
老大 新主题咋样了 有没有付费版本啊 需要之
2F
感谢分享，这样就能减轻浏览压力
3F
这个是先安装插件，再把代码加入到相应位置的操作过程吗？
4F
前排支持
5F
这个看起来挺帅的，坐等新版主题，哈哈~
经常来访
6F
鸟哥是如何实现各浏览器下文字两端对齐的？
B1
@ 瑾瑜 给正文部分添加加样式：
text-align: justify; text-justify: inter-ideograph;
B2
@ 知更鸟 但是在chrome下无效啊
B3
@ 瑾瑜 效果肯定是有的，只不过没有其它浏览器那么明显
7F
效果很给力啊，鸟哥V5！
8F
为什么我加上去后发现那个loding的图片非常大，这个值是根据什么设置的
B1
@ 小舞 与你所用主题样式有关
9F
272主题应用后，loading.gif很大，请教如何定义loading.gif大小？
B1
@ coolike css添加max-width: 100%;width: auto;height: auto;好了。
10F
为什么要延迟加载呢？真的是影响网速么？以现在的网速一张图片不如代码的混乱更会影响网速吧。
B1
@ 民间偏方大全 延迟加载还是有好处的。不过要是能首屏预加载，一打开屏幕上的图片就加载出来了。其他的滚动再延迟加载。
11F
很受启发，在移动开发中值得学习，受教了
12F
-。-不喜欢哈
13F
感觉虽然延迟加载了。但是加载也太慢了点。不知道是什么原因。
14F
好久没来了,过来看看
15F
看着小国非常不错，给添加一下效果看看。
16F
嗯，很不错的文章，学习了。
17F
请问鸟哥，在新版Ality主题中，“添加一个data-original属性”这步是在哪里实现的？我只在thumbnail里找到2个……
18F
如果要移植到其他的地方不是没办法了吗？为图片自动添加 data-original 属性，这个我现在要用到discuz中怎么搞这个呢？
19F
鸟哥，我在文章中添加上了个gif动图，但是网页打开它不动，只有点了一下之后他在照片的框里才动，这是在怎么回事
20F
没有啥效果
B1
@ 同盟源 卧考，你还真是无处不在啊。
21F
鸟哥请教一个问题，我现在想实现的是在评论中gif图像点击加载，要在标签中用data-original替换掉src，该如何判断gif图像呢？
add_filter (‘get_comment_text’, ‘lazyload’);
function lazyload($content) {
$loadimg_url=get_bloginfo(‘template_directory’).’/img/loading.gif’;
if(!is_feed()||!is_robots) {
$content=preg_replace(‘//i’,”n$0″,$content);
}
return $content;
}
22F
折腾上了，可是只有内容页的图片好使，如何才能实现主页和分类页等调用的缩略图也延迟加载呢？？
求鸟哥赐教，谢谢了！
23F
好用哦！
24F
鸟哥求助， 我按照你的方法做了以后，可以使用图片延迟了。 可是我的slideshow 幻灯片插件就一直无法正常工作。反安装图片延迟插件也是一样。 www.atelite.com 求救
25F
想问问鸟叔叔，首页（非文章页）的图片如何一起实现这种延迟加载呢?
26F
知更鸟，你好，我想问一下，您说的：“将一张加载动画图片放到主题图片文件夹img中”这句话里面，如何定义这个”加载动画图片“的默认大小呢？我延迟加载时候，这个动画图片总是最大化，而没有定义长宽，结果延迟加载的时候，看起来有点不美观
27F
鸟哥，你的主题是如何实现图片加载的呢，我看源码好像不是用的这个方法呀，请指教，谢谢
B1
@ 星星之火 我用的是另外一个延迟加载的方法，而且也没启用，看不到效果的
不过本文的方法还是非常有效的
B2
@ 知更鸟 谢谢
28F
为什么我添加了后没有你这种淡出的效果呢？是因为loading.gif的原因么？这个gif文件能不能分享？
29F
想请教一下贵博的文章图片是否启用了延迟加载呢？
B1
@ 小z 因为我的文章图片不是很多，所以并没开，不过留言头像这里是有延迟加载的
30F
不错
31F
其他的程序怎么实现呢，我用的是discuz，你以前分享的图片分享可以实现，现在这个不知道怎么自动给图片增加data-original了，抱歉，我是菜鸟。
32F
向博主学习了，刚刚下载下来，已在本地测试好了。
33F
试试
34F
鸟哥，我想问一下，如何改动代码给图像加上class=”lazy”，这样的话未加载的图像才会有loading的画面，教程里的代码并没有这个功能，还请指教
B1
@ ZERO 呼叫鸟哥
B2
@ ZERO 我只会加占位图，文章已更新自己看吧
35F
我觉得分页就很好
36F
能用svg文件吗
37F
头像那个怎么用啊
来自外部的引用