懒加载

如何判断一个元素是否出现在窗口可视范围(浏览器的上边缘和下边缘之间,肉眼可视)。写一个函数 isVisible实现

懒加载_第1张图片
1.jpg

当窗口滚动时,判断一个元素是不是出现在窗口可视范围。每次出现都在控制台打印 true 。用代码实现

懒加载_第2张图片
2.jpg

当窗口滚动时,判断一个元素是不是出现在窗口可视范围。在元素第一次出现时在控制台打印 true,以后再次出现不做任何处理。用代码实现

懒加载_第3张图片
3.jpg

图片懒加载的原理是什么?

对于图片过多的使用场景,为了提高页面加载速度,改善用户体验,我们对未出现在视野范围内的图片先不进行加载,等到出现在视野范围才去加载。

1、先将img标签中的src链接设为同一张图片(空白图片),将其真正的图片地址存储再img标签的自定义属性中(比如data-src)。当js监听到该图片元素进入可视窗口时,即将自定义属性中的地址存储到src属性中,达到懒加载的效果。
2、设置一个定时器定时检测出现在视图内的图片,并将其data-src属性的值赋值给src属性。(其实这个地方也可以通过事件来检测)

实现视频中的图片懒加载效果

http://js.jirengu.com/boronulaxo/1/edit?html,output

你可能感兴趣的:(懒加载)