front-end-interview icon indicating copy to clipboard operation
front-end-interview copied to clipboard

Published 20 hours ago • verified publisher icon Liqiuyue9597

图片的懒加载怎么实现

Open Liqiuyue9597 opened this issue 4 years ago • 1 comments

我回答：预先将图片链接放到data-url属性，如果图片到页面的高度相等就把图片的src赋值为data-url里的地址....等等等 面试官说这个方法会引起回流，还有没有其他方法。。。。

Liqiuyue9597 avatar Aug 15 '20 10:08 Liqiuyue9597

1.基本方法就是监听scroll事件通过offsetTop属性等去计算。不过这个已经很老了。 2.用HTML5新增的getBoundingClientRect可以直接拿到图片距离顶部的高度等属性，比1更简单、代码量少很多。 3.浏览器提供的API：IntersectionObserver API。通过intersecting的属性去监听图片有没有进入可视窗口，不需要比较高度和监听scroll事件。 我回答到2就不知道后面了，面试官应该是想听3

Liqiuyue9597 avatar Aug 27 '20 07:08 Liqiuyue9597