图片懒加载

图片懒加载

图片懒加载概念:

图片懒加载是一种网页优化技术。图片作为一种网络资源,在被请求时也与普通静态资源一样,将占用网络资源,而一次性将整个页面的所有图片加载完,将大大增加页面的首屏加载时间。为了解决这种问题,通过前后端配合,使图片仅在浏览器当前视窗内出现时才加载该图片,达到减少首屏图片请求数的技术就被称为“图片懒加载”。

网站一般如何实现图片懒加载技术呢?

在网页源码中,在img标签中首先会使用一个“伪属性”(通常使用src2,original......)去存放真正的图片链接而并非是直接存放在src属性中。当图片出现到页面的可视化区域中,会动态将伪属性替换成src属性,完成图片的加载。

示例:

站长素材中就使用图片懒加载技术,只有当图片到达用户的可视区域内(当前视窗)才会进行加载。

posted @ 2019-08-11 16:30  写bug的日子  阅读(102)  评论(0编辑  收藏  举报