img标签在加载图片的时候,是通过请求src属性所指向的文件加载图片的。
如果img本身没有src属性,那么img标签在渲染的时候,就不会加载图片。
所以懒加载的原理就是将img标签的src属性暂时先改成一个自定义属性,这样页面已加载的就会不去加载图片,当img标签所在区域进入屏幕可视区域后,从存放图片路径的自定义属性中获取图片地址,并动态设置给对应img标签的src属性,这样浏览器会自动帮我们去请求对应的图片资源,也就实现了图片懒加载。
大部分懒加载的插件都是基于jquery的,比如jquery.lazyload。vue也有实现懒加载的插件