图片懒加载原理

img标签在加载图片的时候,是通过请求src属性所指向的文件加载图片的。

如果img本身没有src属性,那么img标签在渲染的时候,就不会加载图片。

所以懒加载的原理就是将img标签的src属性暂时先改成一个自定义属性,这样页面已加载的就会不去加载图片,当img标签所在区域进入屏幕可视区域后,从存放图片路径的自定义属性中获取图片地址,并动态设置给对应img标签的src属性,这样浏览器会自动帮我们去请求对应的图片资源,也就实现了图片懒加载。

大部分懒加载的插件都是基于jquery的,比如jquery.lazyload。vue也有实现懒加载的插件

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容