WordPress图片延迟加载

2014年07月12日09:59:02 52 已收录 19,212

之前《jQuery实现图片延迟加载》一文的方法,其实图片并未真正实现延迟加载,只是在窗口滚动到图片位置时才显示图片而已,是个假像。目前这个图片延迟加载插件 jquery.lazyload.js已更新,最新版本是1.9.3,并给出真正实现图片延迟加载的方法

效果演示

新版 jquery.lazyload.js 插件,要求必须给图片地址添加一个data-original属性,

  1. <img class="lazy" data-original="img/example.jpg" width="640" height="480">

有占位图的写法:

  1. <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模板中:

展开代码展开

  1. <script src="<?php echo get_template_directory_uri(); ?>/js/jquery.min.js" type="text/javascript"></script>
  2. <script src="<?php echo get_template_directory_uri(); ?>/js/jquery.lazyload.min.js" type="text/javascript"></script>
  3. <script type="text/javascript">
  4.     $(function() {
  5.         $("img").lazyload({
  6.             effect:"fadeIn"
  7.           });
  8.         });
  9. </script>

二、为图片自动添加 data-original 属性

按官网的要求插入图片时必须添加一个data-original属性,手动添加很麻烦,还好有人已提供自动为图片添加data-original 属性的方法,将下面代码添加到主题 functions.php 中:

展开代码展开

  1. add_filter ('the_content', 'lazyload');
  2. function lazyload($content) {
  3.     $loadimg_url=get_bloginfo('template_directory').'/img/loading.gif';
  4.     if(!is_feed()||!is_robots) {
  5.         $content=preg_replace('/<img(.+)src=[\'"]([^\'"]+)[\'"](.*)>/i',"<img\$1data-original=\"\$2\" src=\"$loadimg_url\"\$3>\n<noscript>\$0</noscript>",$content);
  6.     }
  7.     return $content;
  8. }

将一张加载动画图片放到主题图片文件夹img中

另外,Wordpress头像延迟加载,可以用下面的代码:

展开代码展开

  1. <?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头像调用标准函数:

  1. <?php echo get_avatar( $comment, '32' ); ?>

也同样可以实现Wordpress头像延迟加载。

优点:只有浏览到图片位置时才加载图片,可以提高多图片页面的加载速度,减轻服务器负担。

缺点:可能会影响到搜索引擎对图片的收录,还有就是部分浏览器打开页面会出现空白...

具体效果看下页的图片延迟加载演示

文件下载

博客主机
weinxin
我的微信
分享交流WordPress经验与技巧,关注前端设计与网站制作。仅用于功能演示。
Begin主题购买
Begin主题购买

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:52   其中:访客  41   博主  6   引用   5

    • 每天来看看 3

      老大 新主题咋样了 有没有付费版本啊 需要之

      • kpopcomedy 6

        感谢分享,这样就能减轻浏览压力

        • kpopcomedy 6

          这个是先安装插件,再把代码加入到相应位置的操作过程吗?

          • musk100 4

            前排支持

            • 软件派 3

              这个看起来挺帅的,坐等新版主题,哈哈~

              经常来访

              • 瑾瑜 1

                鸟哥是如何实现各浏览器下文字两端对齐的?

                  • 知更鸟 Admin

                    @瑾瑜 给正文部分添加加样式:
                    text-align: justify;  text-justify: inter-ideograph;  

                      • 瑾瑜 1

                        @知更鸟 但是在chrome下无效啊

                          • 知更鸟 Admin

                            @瑾瑜 效果肯定是有的,只不过没有其它浏览器那么明显

                      • aunsen 4

                        效果很给力啊,鸟哥V5!

                        • 小舞 1

                          为什么我加上去后发现那个loding的图片非常大,这个值是根据什么设置的

                          • coolike 2

                            272主题应用后,loading.gif很大,请教如何定义loading.gif大小?

                              • coolike 2

                                @coolike css添加max-width: 100%;width: auto;height: auto;好了。

                              • 民间偏方大全 1

                                为什么要延迟加载呢?真的是影响网速么?以现在的网速一张图片不如代码的混乱更会影响网速吧。

                                  • 有新意吧 2

                                    @民间偏方大全 延迟加载还是有好处的。不过要是能首屏预加载,一打开屏幕上的图片就加载出来了。其他的滚动再延迟加载。

                                  • 糊糊 2

                                    很受启发,在移动开发中值得学习,受教了

                                    • 惜乐博客 3

                                      -。-不喜欢哈

                                      • 欲思博客 0

                                        感觉虽然延迟加载了。但是加载也太慢了点。不知道是什么原因。

                                        • 软件酷(Softku) 5

                                          好久没来了,过来看看

                                          • 购物生活好店品 4

                                            看着小国非常不错,给添加一下效果看看。

                                            • WEB学习 1

                                              嗯,很不错的文章,学习了。

                                              • 老虎 5

                                                请问鸟哥,在新版Ality主题中,“添加一个data-original属性”这步是在哪里实现的?我只在thumbnail里找到2个……

                                                • 韩饭吧 1

                                                  如果要移植到其他的地方不是没办法了吗?为图片自动添加 data-original 属性,这个我现在要用到discuz中怎么搞这个呢?

                                                  • qq2013 1

                                                    鸟哥,我在文章中添加上了个gif动图,但是网页打开它不动,只有点了一下之后他在照片的框里才动,这是在怎么回事

                                                    • 同盟源 3

                                                      没有啥效果

                                                      • 高高 3

                                                        鸟哥请教一个问题,我现在想实现的是在评论中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;
                                                        }

                                                        • 折腾代码 0

                                                          折腾上了,可是只有内容页的图片好使,如何才能实现主页和分类页等调用的缩略图也延迟加载呢??
                                                          求鸟哥赐教,谢谢了!

                                                          • 久久 0

                                                            好用哦!

                                                            • atelite 0

                                                              鸟哥求助, 我按照你的方法做了以后,可以使用图片延迟了。 可是我的slideshow 幻灯片插件就一直无法正常工作。反安装图片延迟插件也是一样。 www.atelite.com 求救

                                                              • flippy 2

                                                                想问问鸟叔叔,首页(非文章页)的图片如何一起实现这种延迟加载呢? :?:

                                                                • Flippy 2

                                                                  知更鸟,你好,我想问一下,您说的:“将一张加载动画图片放到主题图片文件夹img中”这句话里面,如何定义这个”加载动画图片“的默认大小呢?我延迟加载时候,这个动画图片总是最大化,而没有定义长宽,结果延迟加载的时候,看起来有点不美观

                                                                  • 星星之火 2

                                                                    鸟哥,你的主题是如何实现图片加载的呢,我看源码好像不是用的这个方法呀,请指教,谢谢

                                                                      • 知更鸟 Admin

                                                                        @星星之火 我用的是另外一个延迟加载的方法,而且也没启用,看不到效果的
                                                                        不过本文的方法还是非常有效的

                                                                      • shawnzhou 0

                                                                        为什么我添加了后没有你这种淡出的效果呢?是因为loading.gif的原因么?这个gif文件能不能分享?

                                                                        • 小z 0

                                                                          想请教一下贵博的文章图片是否启用了延迟加载呢?

                                                                            • 知更鸟 Admin

                                                                              @小z 因为我的文章图片不是很多,所以并没开,不过留言头像这里是有延迟加载的

                                                                            • 青枳博客 0

                                                                              不错

                                                                              • 韩饭吧 1

                                                                                其他的程序怎么实现呢,我用的是discuz,你以前分享的图片分享可以实现,现在这个不知道怎么自动给图片增加data-original了,抱歉,我是菜鸟。

                                                                                • 爱杂侃 0

                                                                                  向博主学习了,刚刚下载下来,已在本地测试好了。

                                                                                  • 腾蛙 3

                                                                                    试试

                                                                                    • ZERO 1

                                                                                      鸟哥,我想问一下,如何改动代码给图像加上class=”lazy”,这样的话未加载的图像才会有loading的画面,教程里的代码并没有这个功能,还请指教

                                                                                        • ZERO 1

                                                                                          @ZERO 呼叫鸟哥

                                                                                            • 知更鸟 Admin

                                                                                              @ZERO 我只会加占位图,文章已更新自己看吧

                                                                                          • 腾蛙网 3

                                                                                            我觉得分页就很好

                                                                                          • 来自外部的引用: 5

                                                                                            • WordPress 真正的图片延迟加载技术 | 优畅主题
                                                                                            • Test 有限公司
                                                                                            • WordPress图片延迟加载 – 生命不息,奋斗不止
                                                                                            • 知更鸟新主题Ality小试
                                                                                            • WordPress图片延迟加载 | 陆桥桥的博客