加入页面中有多张这样的图片需要加载。具体的实现逻辑如下css加载失败，在文档的事件中，添加延迟加载处理逻辑，首先获取class属性名为lazy的所有〈img〉标签，将这些标签暂存在一个名为的数组中，表示需要进行延迟加载但还未加载的图片集合。当一个图片被加载后，便将其从数组中移除，直到数组为空时，表示所有待延迟加载的图片均已经加载完成，此时便可将页面滚动事件移除。
这里使用了t（）函数获取元素的相对位置.
rectObject = object.getBoundingClientRect();
：元素上边到视窗上边的距离;
.right：元素右边到视窗左边的距离;
.：元素下边到视窗上边的距离;
.left：元素左边到视窗左边的距离;
对于只可上下滚动的页面，判断一个图片元素是否出现在屏幕视窗中的方法其实显而易见，即当元素上边缘距屏幕视窗顶部的top值小于整个视窗的高度.时，预加载的事件处理代码如下：
document.addEventListener(DOMContentLoaded, function() {
const imags = [].slice.call(document.querySelector('.lazy'))
const active = false; // 限制函数被频繁调动
function load() {
if(active === false) {
active = true
setTimeout(() => {
imags.forEach((img) => {
const objPos = img.getBoundingClientRect();
if(objPos.top =0 && img.display !== 'done') {
img.src = img.dataset.src;
img.classList.remove('lazy')
imags.filter((i) => (i !== img))
if(imags.length === 0) {
document.removeEventListener('scroll', load)
window.removeEventListener('resize', load)
window.removeEventListener('orientationchange', load)
}
}
})
active = false
}, 200)
}
}
document.addEventListener('scroll', load)
window.addEventListener('resize', load)
window.addEventListener('orientationchange', load)
})
这种方式的有点就是兼容性比较好，缺点是频繁地进行计算必然会影响性能，代码也会比较繁琐。
实现图片的延迟加载： 方式
现代浏览器已大多支持了 API，用一句话简述：每当因页面滚动或窗口尺寸发生变化css加载失败，使得目标元素（）与设备视窗或其他指定元素产生交集时，便会触发通过 API配置的回调函数，在该回调函数中进行延迟加载的逻辑处理，会比传统方式显得更加简洁而高效。
简单来说，目标元素的可见性变化时，就会调用观察器的回调函数 。
一般会触发两次。一次是目标元素刚刚进入视口（开始可见），另一次是完全离开视口（开始不可见）。
document.addEventListener(DOMContentLoaded, function() {
const imags = [].slice.call(document.querySelector('.lazy'))
if(window.IntersectionObserver && window.IntersectionObserverEntry && window.IntersectionObserverEntry.prototype.intersectionRatio) {
var lazyImgObserver = new IntersectionObserver((entries, observer) => {
entries.forEach((entry)=> {
if(entry.isIntersecting) {
var lazyImg = entry.target;
lazyImg.src = lazyImg.dataset.src;
lazyImg.classList.remove('lazy');
lazyImgObserver.unobserve(lazyImg)
}
})
})
imags.forEach((img) => {
lazyImgObserver.observe(img)
})
}
})
这种方式判断元素是否出现在视窗中更为简单直观，应在实际开发中尽量使用，但其问题是并非所有浏览器都能兼容。
（1）做好尽量完备浏览器兼容性检查，对于兼容 API的浏览器，采用这种方式进行处理，而对于不兼容的浏览器，则切换回传统的实现方式进行处理。 （2）使用相应兼容的插件，在W3C官方账号下就有提供。
实现图片的延迟加载：CSS类名方式
这种实现方式通过CSS的-image属性来加载图片，与判断〈img〉标签src属性是否有要请求图片的URL不同，CSS中图片加载的行为建立在浏览器对文档分析基础之上。
document.addEventListener(DOMContentLoaded, function() {
const imags = [].slice.call(document.querySelector('.lazy'))
if(window.IntersectionObserver && window.IntersectionObserverEntry && window.IntersectionObserverEntry.prototype.intersectionRatio) {
var lazyImgObserver = new IntersectionObserver((entries, observer) => {
entries.forEach((entry)=> {
if(entry.isIntersecting) {
var lazyImg = entry.target;
lazyImg.classList.add('visible');
lazyImgObserver.unobserve(lazyImg)
}
})
})
imags.forEach((img) => {
lazyImgObserver.observe(img)
})
}
})
这种方式限制于需要提前写好css样式。
原生的延迟加载支持
除了上述通过开发者手动实现延迟加载逻辑的方式，从 75版本开始，已经可以通过〈img〉和〈〉标签的属性原生支持延迟加载了，属性包含以下三种取值。
lazy：进行延迟加载。 eager：立即加载。 auto：浏览器自行决定是否进行延迟加载。
测试：image标签就是 img
Document
img {
width: 700px;
height: 200px;
display: block;
}
可以看到，首次加载的个数是13个，首屏一般只能放下4个左右，13个以后的img滚动到视线内部会自动去加载。
实践发现有以下几个特点：
Lazy 加载数量与屏幕高度有关，高度越小加载数量越少，但并不是线性关系。Lazy 加载数量与网速有关，网速越慢，加载数量越多，但并不是线性关系。Lazy 加载没有缓冲，滚动即会触发新的图片资源加载。Lazy 加载在窗口尺寸变化时候也会触发，例如屏幕高度从小变大的时候。Lazy 加载也有可能会先加载后面的图片资源，例如页面加载时滚动高度很高的时候。
与有关的几个行为特征：
判断浏览器是否支持原生，最好使用'' in XXX判断。获取属性值可以直接img.；原生不可写，不可访问例如..会报错 。如果要使用，注意做兼容性处理。
限时特惠:本站持续每日更新海量各大内部创业课程，一年会员仅需要98元，全站资源免费下载
点击查看详情
站长微信:Jiucxh
