懒加载的实现原理及一些实现方法

为了避免页面一次性向服务器发送大量请求而造成页面阻塞,我们需要控制请求数量,按照我们需要的量去加载图片。

懒加载的优点

提高前端性能,按需加载图片减轻服务器负担,提高页面加载速度。

懒加载的原理

图片的加载是依赖于src路径,我们可以设置一个暂存器,把图片路劲放到暂存器中,当我们需要这个图片加载显示时,再把路径赋值给src,这样就能实现按需加载,也就是懒加载。我们通常使用html5中的data-属性作为暂存器,例如src的值默认是正在加载中的GIF,而真正的图片路径是保存在data-中。

懒加载的实现

现在很多优秀的插件都能够实现懒加载的功能,但是不管方法如何,实现原理都是一样的。

JQuery(不使用插件)

使用懒加载时,我们的src的值默认是”正在加载中“的GIF,data-lazyload是自定义属性,用于存放图片真实路径。如下面的代码。

<img src="loading.gif" data-lazyload="img.jpg">

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zgyxzd.html