»

一段小巧、轻便的延迟加载(lazy loading)代码轻松搞定图片懒加载

    WordPress  
CDNCDN的问题SEO重定向cookiesIIS数据库访问身份认证百度云加速网络安全建站windows主机WP Rocket腾讯云加速Apache防盗链WordPress插件工作前端插件Wp Super Cache缓存CLB网站镜像

也许大家为了优化前端网页加载而使用图片懒加载(也叫图片延迟加载,lazy-loading image)功能,这样可以让首屏展现更加流畅,提升用户体验。网上有很多关于懒加载的 JavaScript 代码,对于 WordPress 而言,也有很多优化插件中也包含了懒加载选项设置。但笔者试用了一些 WordPress 插件中的懒加载功能,感觉不是特别理想,有些把页面彻底截断了,有些在使用谷歌 PageSpeed 工具分析的时候仍提示没有设置懒加载(尤其是在手机端)。

最近闲逛,发现了一段非常小巧而轻便的懒加载代码,名字叫 echo,尽管是几年前的作品,但放在 WordPress 上面一点也不过时。echo.js 使用了 HTML5 的 data-* 属性(注意,不兼容 IE6、IE7),不依赖任意第三方插件库,特别适用于移动端需要加载大量图片的场景,而且只需要简单的设置即可。

原始文件可从 github 原作者那里下载: github.com/toddmotto/echo

 

怎么使用?

可以这样引入 js 文件(地址自行定义):

  1. <script src="/echo.js"></script>

然后在图片中这样设置(图片地址、alt、width、height属性可自行设置,此处忽略):

  1. <img src="/placeholder.jpg" data-echo="/image.jpg" />  

其中 placeholder.jpg 是一张非常非常小的图片(例如像素为1 x 1),用做懒加载的默认图片,而 image.jpg 则是最终要加载的真实图片。

最后,在 JavaScript 代码中 对引入的 echo.js 做如下设置:

本文禁止住转载。任何形式转载请联系作者(时光在路上 www.timezls.com)。时光在路上保留所有权利

  1. echo.init({  
  2.   offset: 0, //离可视区域多少像素的图片可以被加载,默认为0  
  3.   throttle: 250, //图片延迟多少毫秒加载,默认为250  
  4.   unload: false //告诉echo是加载还是卸载视图中的图片,也就是只加载一次,离开视线后图片不回到 placeholder.jpg,默认为false  
  5. });  

可以把上面这段代码并入 echo.js 之中。

至于其他参数的说明,详见原作者的主页。

 

本文禁止住转载。任何形式转载请联系作者(时光在路上 www.timezls.com)。时光在路上保留所有权利

WordPress 中怎么做相应的改造?

在主题文件 functions.php 中加入如下代码,把<img>标签中的 src 替换为 data-echo,并加入 默认图片的 src 地址:

  1. add_filter ('the_content', 'lazyloading'); // 在`the_content`中替换
  2. function lazyloading($content) {  
  3.     $loadimg_url='/placeholder.jpg'; //懒加载的默认图片  
  4.     if(!is_feed()||!is_robots) {  //避免蜘蛛抓取 placeholder.jpg。纯静态页面失效 
  5.         $content=preg_replace('/<img(.+)src=[\'"]([^\'"]+)[\'"](.*)>/i',"<img\$1data-echo=\"\$2\" src=\"$loadimg_url\"\$3>",$content);  
  6.     }  
  7.     return $content;  
  8. }  

如果你想往缩略图和头像中添加懒加载,则可添加如下类似的代码到 functions.php 中,类似于上面的替换:

  1. add_filter( 'post_thumbnail_html', '函数1');  
  2. function 函数1() {  
  3. }  
  4.   //或/和
  5. add_filter( 'get_avatar', '函数2' );  
  6. function 函数2() {  
  7. }  

 

上述改造 WordPress 的代码已经放在网盘里,可自行下载选用:pan.baidu.com/s/1mqL-XUfqZcmS1C5MXurkNA ,提取码: zwsb

 

本文禁止全文转载。任何形式转载请联系作者(时光在路上 www.timezls.com) Copyright © 2023. All Rights Reserved

题外话:Chrome 75 起,原生支持图片的延迟加载

如果你不想再多添加上面的js代码,可以试试 Chrome 的原生延迟加载,只需在<img>标签中添加 loading="lazy",即: <img src="..." loading="lazy" />。

不过,据我观察,在PC端,打开首屏以后,非首屏的很多图片也会同时加载,如果你图片足够多、页面很长(height)的话,可以显现出懒加载的优势,如果你文章里三四张图片,基本看出来有这个支持懒加载的功能,打开首屏以后,基本上“屏幕外”的几张图片都会同时加载了。

本文禁止无授权转载 - 时光在路上 www.timezls.com 保留所有权利

而且,在移动端,经过谷歌测试工具检测,仍然在提示 建议延迟加载“屏幕外”图片。好像并没起多大作用。

再有,如果你使用了上述js延迟加载的代码,并且添加了 loading="lazy",也会让上述js代码效能降低很多,因为一些“屏幕外”的图片也同时和首屏的图片一起加载了。所以最好单独使用上述js代码。

 

WordPress 对图片延迟加载(懒加载)功能的支持

WordPress从5.5版本开始,里面就增加了一个内置图片延迟加载(懒加载)功能。新版本会向正文引用的图片代码中加入 loading="lazy" 属性。但是,如前所述,有时候用js代码,还是直接把这个功能关了吧

 

图片加载过程中的修饰

可以对图片加载过程中进行修饰,例如设置渐变效果,通过改变透明度:把未加载新图片时的位置设置成不透明,把加载图片后设置成完全透明,通过CSS代码设置:

  • .e-lazy {
  •     -webkit-transition: opacity 0.5s ease-in-out 0.1s;
  •     -moz-transition: opacity 0.5s ease-in-out 0.1s;
  •     -o-transition: opacity 0.5s ease-in-out 0.1s;
  •     transition: opacity 0.5s ease-in-out 0.1s;
  •     opacity: 0;
  • }

加载图片之后增加一个类 .loaded

  • .e-loaded {
  •     opacity: 1;
  • }

那么未加载新图片之前,html代码书写格式就变成了类似于  <img src="占位图片" data-echo="要加载的图片地址" class="e-lazy" />  这种。加载之后,变成 <img src="占位图片" data-echo="要加载的图片地址" class="e-lazy e-loaded" />

本文禁止全文转载。任何形式转载请联系作者(时光在路上 www.timezls.com) Copyright © 2023. All Rights Reserved

如何在图片加载时引入 .loaded 类?JavaScript 代码解决,有很多方法可以添加新的类。结合本例中的 echo.js 代码,只需要在代码中 把 data-echo= 变成 src= 之后添加即可。

时光在路上扫码阅读、分享
  • 版权声明:该文章由 时光在路上 发表,共 2715字。除非特别标注来源,否则为原创。详见《版权声明》部分。
  • 转载请注明:文章标题和文章链接 - 时光在路上 - 也可直接“复制本文链接” 或 使用右边二维码分享本文 →