需求 当页面图片特别多,默认访问的时候就会将页面全部内容加载完,等待时间过长,体验欠佳,需改进。
如果不进行设置的话,一个页面会一次性加载所有的资源数据,考虑到不可能所有访客会全部将页面看完,也会导致流量的浪费,加载体验上有待提升。这里就采用延迟加载的方案。
延迟加载也称懒加载,前端实现的方式多种多样,可以通过css的属性设为display none,进入到view的图片再改为inline,inlineblock。或者在img的src attribute的位置留空,在data-src上填写实际的图片地址,这样浏览器在打开页面的时候就不会主动载入这些图片,设置在进入页面或快进入页面之前再进行加载。
在Wordpress中的话就可以采用插件的形式,直接配置即可,这里采用的是 BJ Lazy Load 插件,在Wordpress插件商店直接搜索即可安装。
在插件设置界面可以选择延迟加载的内容,如:文本、小部件、缩略图、头像、图片、子窗口。
如果只想针对图片的话,只需要启动lazy load images即可。如想要指定某些图片不不需要延迟加载,在图片标签上加入标记类名即可。
Post Views: 293