WordPress图片延迟加载

知更鸟
知更鸟
知更鸟
1575
文章
6924
评论
2014年7月12日09:59:02 52 21.3K

之前《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头像延迟加载。

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

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

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

文件下载
WordPress图片延迟加载
weinxin
版权声明
本站原创文章转载请注明文章出处
WordPress 5.5 回复按钮失效 WordPress

WordPress 5.5 回复按钮失效

有些童鞋升级WordPress 5.5 后发现回复按钮失效,在WordPress 5.1时就出现过,问题大部分出现在自定义了评论函数或者使用Ajax评论的主题中。 症状是:点击回复按钮刷新页面,并且评...
禁用 WordPress 5.5 图片延迟加载功能 WordPress

禁用 WordPress 5.5 图片延迟加载功能

WordPress 5.5除了不断优化修改块编辑器之外,还增加了几个新功能,其中的图片延迟加载功能,经本人测试,除了在火狐下有效果,在Chromium内核的浏览器中无效,难道是开发人员也和我一样只用火...
WordPress 5.5 发布 WordPress

WordPress 5.5 发布

WordPress 5.5 Eckstine发布,新版本更新的内容与之前在《WordPress 5.5 测试版发布》中说的没什么变化,其中: 图像延迟加载,只在火狐浏览器中有效,Chromium内核的...
WordPress自定义媒体上传路径 WordPress

WordPress自定义媒体上传路径

默认WordPress自定义媒体上传路径wp-content\uploads并以年和月文件夹归档,如果想修改这个默认的存放目录,可以参考我之前的两篇文章。 方法一:通过add_filter 钩子修改上...
匿名

发表评论

匿名网友 填写信息

:?: :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 kpopcomedy 6

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

        • kpopcomedy kpopcomedy 6

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

          • musk100 musk100 4

            前排支持

            • 软件派 软件派 3

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

              经常来访

              • 瑾瑜 瑾瑜 1

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

                  • 知更鸟 知更鸟

                    @ 瑾瑜 给正文部分添加加样式:

                    1. text-alignjustify;  
                    2. text-justify: inter-ideograph;  
                  • aunsen aunsen 4

                    效果很给力啊,鸟哥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

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

                                          • 老虎 老虎 5

                                            请问鸟哥,在新版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

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

                                                                  • 知更鸟 知更鸟

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

                                                                  • 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

                                                                                        我觉得分页就很好