YPHP博客首页图片延迟加载


当网页上存在大量图片的时候,一次性去加载图片的话是很影响体验的,不仅影响网页渲染速度,还浪费带宽,所以前端出现了图片懒加载这种技巧。

一般是在图片到或将到可视区域的时候再去加载图片。这就是图片懒加载了。

我使用 jquery.lazyload.js 这个插件还完成这个功能,方便快捷哈。

github地址: tuupola/jquery_lazyload,直接用 2.x 的版本。

修改: 发现2.0版本的话,在手机端用起来有问题,因为我PC和WAP端用的是同个模板的,所以改用稳定的1.9.7版本。

https://cdn.bootcss.com/jquery_lazyload/1.9.7/jquery.lazyload.min.js

和2.0使用上基本一致,就是将 data-src 改为 data-original . 


ajax加载更多的情况

因为我的首页使用了ajax请求加载更多来查看下一页内容的形式,请求得到数据,再拼dom插入容器。

这样的话,就除了页面刚加载完触发一下 lazyload 事件外,每次插入dom后,还得触发下才有效果。

所以在在加载更多开始前就移除下已经触发过 lazyload 的 img 中的 class lazy 。

20180206152002

插入dom成功后,得执行一下 lazyload_img();


最后

其实我发现在我的博客首页用这个图片懒加载效果不好,还是适合那种大图,而且图片量大的情况,然后懒加载前的默认图片也需要定制下。


javascript skill YPHP


上一篇:TCPDF盖骑缝章

富文本编辑文档内容配合js实现tab选项卡效果:下一篇