Web性能优化之——图片懒加载(lazyload)
一、什么是图片懒加载
图片懒加载,就是图片延迟加载。只加载页面可视区域上的图片,等滚动到页面下面时,再加载对应视口上的图片
二、懒加载的实现
图片的懒加载可以通过以下三个步骤实现
一开始不给img元素的src属性赋值,这样就不会加载图片元素了
当img元素出现在用户的浏览器视窗上,就给img的src属性赋值,加载图片
通过防抖函数减少用户反复滚动页面造成的性能浪费
如下图所示
在实现图片懒加载之前,我们需要先了解几个函数或属性
1、window.innerHeight
window.innerHe
原创
2020-12-26 23:34:42 ·
868 阅读 ·
1 评论