Site Overlay

WordPress图片延迟加载(懒加载)

需求

当页面图片特别多,默认访问的时候就会将页面全部内容加载完,等待时间过长,体验欠佳,需改进。

如果不进行设置的话,一个页面会一次性加载所有的资源数据,考虑到不可能所有访客会全部将页面看完,也会导致流量的浪费,加载体验上有待提升。这里就采用延迟加载的方案。

延迟加载也称懒加载,前端实现的方式多种多样,可以通过css的属性设为display none,进入到view的图片再改为inline,inlineblock。或者在img的src attribute的位置留空,在data-src上填写实际的图片地址,这样浏览器在打开页面的时候就不会主动载入这些图片,设置在进入页面或快进入页面之前再进行加载。

在Wordpress中的话就可以采用插件的形式,直接配置即可,这里采用的是 BJ Lazy Load 插件,在Wordpress插件商店直接搜索即可安装。

在插件设置界面可以选择延迟加载的内容,如:文本、小部件、缩略图、头像、图片、子窗口。

如果只想针对图片的话,只需要启动lazy load images即可。如想要指定某些图片不不需要延迟加载,在图片标签上加入标记类名即可。

发表评论

邮箱地址不会被公开。 必填项已用*标注

A beliving heart is your magic My heart
Copyright © 2022 Diuut. All Rights Reserved. | Catch Vogue by Catch Themes | 蜀ICP备2021011635号-1 | magnet:?xt=urn:btih: