关于图片懒加载(lazyload)的两种实现方法

在实际的项目开发中,我们通常会遇见这样的场景:一个页面有很多图片,而首屏出现的图片大概就一两张,那么我们还要一次性把所有图片都加载出来吗?显然这是愚蠢的,不仅影响页面渲染速度,还浪费带宽。这也就是们通常所说的首屏加载,技术上现实其中要用的技术就是图片懒加载–到可视区域再加载。

图片懒加载的思路

将页面里所有img属性src属性用data-xx代替,当页面滚动直至此图片出现在可视区域时,用js取到该图片的data-xx的值赋给src。

关于各种宽和高

懒加载的示例

jqueryLazyload方式实现图片懒加载

下载链接:https://pan.baidu.com/s/1p6vPx2SbUJXrRnEnX0egVQ

提取码:irv3

为了代码可读性,属性值我都写好了注释。值得注意的是预制图片属性为data-original,并且最好是给予初始高宽占位,以免影响布局,当然这里为了演示我是写死的640×480,如果是响应式页面,高宽需要动态计算。

echo.js方式实现图片懒加载

在前面的一些文章中介绍了一款非常简单实用轻量级的图片延时加载插件echo.js,如果你的项目中没有依赖jquery,那么这将是个不错的选择,50行代码,压缩后才1k。当然你完全可以集成到自己项目中去!

下载地址:https://github.com/helijun/helijun/tree/master/plugin/echo

blank.gif是一张背景图片,包含在插件里了。图片的宽高必须设定,当然,可以使用外部样式对多张图片统一控制大小。data-echo指向的是真正的图片地址。

总结

两者都非常简单,实现思路是一样的,只是jquerylazyload多几个属性。其实常用的echo就足够了,并且完全可以集成到自己项目中的公共js中,图片懒加载是相当常见且简单实用的功能,如果你的项目中还是傻瓜式的一次性全部加载,那么请花20分钟优化下~

转载请注明出处:看飞碟 » 关于图片懒加载(lazyload)的两种实现方法

赞 (0) 送糖

评论 0

评论前必须登录!

登陆 注册

可爱的来客!请作者吃颗糖吧

支付宝扫一扫打赏

微信扫一扫打赏

你好,我是Jeson