WordPress图片延迟加载

WordPress5422.4K阅读模式

之前《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
我的微信
版权声明
本站原创文章转载请注明文章出处及链接,谢谢合作!
 
知更鸟
评论  54  访客  43  作者  6
    • 每天来看看
      每天来看看 3

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

      • kpopcomedy
        kpopcomedy 6

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

        • kpopcomedy
          kpopcomedy 6

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

          • musk100
            musk100 4

            前排支持

            • 软件派
              软件派 3

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

              经常来访

              • 瑾瑜
                瑾瑜 1

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

                  • 知更鸟
                    知更鸟

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

                      • 瑾瑜
                        瑾瑜 1

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

                          • 知更鸟
                            知更鸟

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

                      • aunsen
                        aunsen 5

                        效果很给力啊,鸟哥V5!

                        • 小舞
                          小舞 1

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

                          • coolike
                            coolike 2

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

                              • coolike
                                coolike 2

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

                              • 民间偏方大全
                                民间偏方大全 1

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

                                  • 有新意吧
                                    有新意吧 2

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

                                  • 糊糊
                                    糊糊 2

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

                                    • 惜乐博客
                                      惜乐博客 3

                                      -。-不喜欢哈

                                      • 欲思博客
                                        欲思博客 0

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

                                        • 软件酷(Softku)
                                          软件酷(Softku) 5

                                          好久没来了,过来看看

                                          • 购物生活好店品
                                            购物生活好店品 4

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

                                            • WEB学习
                                              WEB学习 1

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

                                              • 老虎
                                                老虎 6

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

                                                • 韩饭吧
                                                  韩饭吧 1

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

                                                  • qq2013
                                                    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
                                                              atelite 0

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

                                                              • flippy
                                                                flippy 3

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

                                                                • Flippy
                                                                  Flippy 3

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

                                                                  • 星星之火
                                                                    星星之火 2

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

                                                                      • 知更鸟
                                                                        知更鸟

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

                                                                          • 星星之火
                                                                            星星之火 2

                                                                            @ 知更鸟 谢谢

                                                                        • shawnzhou
                                                                          shawnzhou 0

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

                                                                          • 小z
                                                                            小z 0

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

                                                                              • 知更鸟
                                                                                知更鸟

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

                                                                              • 青枳博客
                                                                                青枳博客 0

                                                                                不错

                                                                                • 韩饭吧
                                                                                  韩饭吧 1

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

                                                                                  • 爱杂侃
                                                                                    爱杂侃 0

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

                                                                                    • 腾蛙
                                                                                      腾蛙 3

                                                                                      试试

                                                                                      • ZERO
                                                                                        ZERO 1

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

                                                                                          • ZERO
                                                                                            ZERO 1

                                                                                            @ ZERO 呼叫鸟哥

                                                                                              • 知更鸟
                                                                                                知更鸟

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

                                                                                            • 腾蛙网
                                                                                              腾蛙网 4

                                                                                              我觉得分页就很好

                                                                                              • 佛系软件
                                                                                                佛系软件 4

                                                                                                能用svg文件吗

                                                                                                • 佛系软件
                                                                                                  佛系软件 0

                                                                                                  头像那个怎么用啊

                                                                                                匿名

                                                                                                发表评论

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

                                                                                                拖动滑块以完成验证