图片懒加载也就是延迟加载
图片懒加载是一种优化网页性能的技术,设置data-original属性来存放真实地址。当滚动页面时,检查所有的img标签,是出现在视野中,如果已经出现在了视野中,那继续再进行判断,看其是否已经被加载过了,如果还没有被加载过,那就进行加载。
图片懒加载也就是延迟加载。
当访问一个页面的时候,先把img元素或是其他元素的背景图片路径替换成一-张大小为1*1px图片的路径 (这样就只需请求一次,俗称占位图 ) ,只有当图片出现在浏览器的可视区域内时,才设置图片正真的路径,让图片显示出来。这就是图片懒加载。这样做可以减轻服务器压力,使页面加载快,节省流量,提升用户体验。
比如有的网页,内容中有很多的图片,图片较大,因为这些页面图片会影响页面加载速度,就比较适合用图片懒加载进行处理。
懒加载的原理
页面中的img元素,如果没有src属性,浏览器就不会发出请求去下载图片,只有通过javascript设置了图片路径,浏览器才会发送请求。
懒加载的原理就是先在页面中把所有的图片统一使用一张占位图进行占位,把正真的路径存在元素的“data-url" 属性里,要用的时候就取出来,再设置。与之相对的是预加载。