图片懒加载
懒加载其实就是延时加载
因为浏览器的可视范围是有限的，所以滚动到所需要显示的位置时在进行加载
方法一：事件监听（监听scroll这个事件，鼠标滚动触发）
前提：需得知窗口显示区的高度（通过window.innnerHeight获取）=> 高度1
需得知图片到视窗上边的距离高度（通过用元素的getBoundingClientReact().top来获取） => 高度2
思路：如果图片未能被看见那么说明 高度2 > 高度1 ，反之 高度2 < 高度1
实现：
// html部分的代码 <img data-src="1.png"> <img data-src="2.png"> <img data-src="3.png">
// js部分的代码
// 获取所有的img标签
const images = document.querySelectorAll('img')
window.addEventListener('scroll', (e) => {
images.forEach(image => {
const imageTop = image.getBoundingClientRect().top
if (imageTop < window.innerHeight) {
const data_src = image.getAttribute('data-src');
image.setAttribute('src', data_src)
}
})
}) 但是！此方法并不推荐使用，因为此方法滚动事件被触发了太多次，消耗大量资源。
方法二：IntersectionObserver (是浏览器的构造函数)
实现：
// html部分和上个方法一样
// js部分如下
const images = document.querySelectorAll('img')
// callback是回调函数，，那么一般是需要触发条件才能执行的，一般触发两次（一次为看见目标元素时，另一次为目标元素卡看不见时）
const callback = entries => {
entries.forEach(entry => {
// console.log(entry)
// entry.isIntersecting为目标元素
if (entry.isIntersecting) {
const image = entry.target
const data_src = image.getAttribute('data-src')
image.setAttribute('src', data_src)
// 结束观察，有几张图片就会触发几次
observer.unObserve(image)
}
})
}
// 因为IntersectionObserver是构造函数，所以第一步要new一个实例
const observer = new IntersectionObserver(callback)
images.forEach(image => {
// 开始观察
observer.observer(image)
}) 
爱奇艺公司氛围 53人发布
查看9道真题和解析