详情介绍
一、懒加载技术的原理
懒加载（Lazy Loading）是一种延迟加载的技术，即在页面初始加载时，只加载可视区域内的资源，对于页面中暂时不可见区域的内容，则推迟加载，直到用户滚动到该区域时才进行加载。这样可以大大减少初次加载时需要传输的数据量，从而提高页面的加载速度，减少用户的等待时间。
二、在谷歌浏览器中实现懒加载的方法
（一）图片懒加载
1. 使用原生 `loading="lazy"` 属性
- 谷歌浏览器对原生的懒加载属性提供了良好的支持。在 img 标签中添加 `loading="lazy"` 属性，即可开启图片的懒加载功能。例如：
- 当页面加载时，带有 `loading="lazy"` 属性的图片将不会立即加载，而是在用户滚动到图片即将进入可视区域时才开始加载。
2. 结合 Intersection Observer API
- 除了使用原生属性外，还可以借助 JavaScript 的 Intersection Observer API 来实现更灵活的图片懒加载效果。以下是一个简单的示例代码：
< lang="en">
img {
display: block;
width: 100%;
height: auto;
}
document.addEventListener("DOMContentLoaded", function() {
const lazyImages = document.querySelectorAll('.lazyload');
if ("IntersectionObserver" in window) {
let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
let lazyImage = entry.target;
lazyImage.src = lazyImage.dataset.src;
lazyImage.classList.remove('lazyload');
lazyImageObserver.unobserve(lazyImage);
}
});
});
lazyImages.forEach(function(lazyImage) {
lazyImageObserver.observe(lazyImage);
});
} else {
// 兼容不支持 Intersection Observer API 的浏览器
let lazyLoad = function() {
lazyImages.forEach(function(lazyImage) {
if (isInViewport(lazyImage)) {
lazyImage.src = lazyImage.dataset.src;
lazyImage.classList.remove('lazyload');
lazyImages = lazyImages.filter(function(image){ return image !== lazyImage; });
if (lazyImages.length === 0) {
document.removeEventListener("scroll", lazyLoad);
}
}
});
};
document.addEventListener("scroll", lazyLoad);
window.addEventListener("resize", lazyLoad);
window.addEventListener("orientationchange", lazyLoad);
}
});
function isInViewport(element) {
const rect = element.getBoundingClientRect();
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
rect.right <= (window.innerWidth || document.documentElement.clientWidth)
);
}
- 上述代码中，首先通过 `data-src` 属性存储真实图片的路径，初始时设置 `src` 为占位符图片。然后使用 Intersection Observer API 监听图片是否进入可视区域，一旦进入则将 `src` 替换为真实图片路径，并停止观察该图片。如果浏览器不支持 Intersection Observer API，则采用滚动事件监听的方式进行兼容处理。
（二）视频懒加载
对于网页中的视频元素，同样可以实现懒加载。可以使用 video 标签的 `preload="none"` 属性来阻止视频在页面加载时自动预加载。当用户滚动到视频区域并播放视频时，再手动加载视频资源。以下是一个简单的示例：
< lang="en">
video {
display: block;
width: 100%;
height: auto;
}
document.addEventListener("DOMContentLoaded", function() {
const lazyVideos = document.querySelectorAll('.lazyload-video');
if ("IntersectionObserver" in window) {
let lazyVideoObserver = new IntersectionObserver(function(entries, observer) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
let lazyVideo = entry.target;
lazyVideo.src = lazyVideo.dataset.src;
lazyVideo.load();
lazyVideo.play();
lazyVideo.classList.remove('lazyload-video');
lazyVideoObserver.unobserve(lazyVideo);
}
});
});
lazyVideos.forEach(function(lazyVideo) {
lazyVideoObserver.observe(lazyVideo);
});
} else {
// 兼容不支持 Intersection Observer API 的浏览器
let lazyLoad = function() {
lazyVideos.forEach(function(lazyVideo) {
if (isInViewport(lazyVideo)) {
lazyVideo.src = lazyVideo.dataset.src;
lazyVideo.load();
lazyVideo.play();
lazyVideo.classList.remove('lazyload-video');
lazyVideos = lazyVideos.filter(function(video){ return video !== lazyVideo; });
if (lazyVideos.length === 0) {
document.removeEventListener("scroll", lazyLoad);
}
}
});
};
document.addEventListener("scroll", lazyLoad);
window.addEventListener("resize", lazyLoad);
window.addEventListener("orientationchange", lazyLoad);
}
});
function isInViewport(element) {
const rect = element.getBoundingClientRect();
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
rect.right <= (window.innerWidth || document.documentElement.clientWidth)
);
}
在上述代码中，视频元素的 `preload="none"` 属性阻止了页面加载时的自动预加载。当视频进入可视区域时，通过 JavaScript 动态设置 `src` 属性并调用 `load()` 和 `play()` 方法来加载并播放视频。
（三）iframe 懒加载
对于网页中的 `iframe` 框架，也可以实现懒加载。可以使用 JavaScript 来监听 `iframe` 是否进入可视区域，然后再动态设置 `src` 属性加载外部页面。以下是一个简单的示例：
< lang="en">
iframe {
display: block;
width: 100%;
height: 300px;
}
document.addEventListener("DOMContentLoaded", function() {
const lazyIframes = document.querySelectorAll('.lazyload-iframe');
if ("IntersectionObserver" in window) {
let lazyIframeObserver = new IntersectionObserver(function(entries, observer) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
let lazyIframe = entry.target;
lazyIframe.src = lazyIframe.dataset.src;
lazyIframe.classList.remove('lazyload-iframe');
lazyIframeObserver.unobserve(lazyIframe);
}
});
lazyIframes.forEach(function(lazyIframe) {
lazyIframeObserver.observe(lazyIframe);
});
} else {
// 兼容不支持 Intersection Observer API 的浏览器
let lazyLoad = function() {
lazyIframes.forEach(function(lazyIframe) {
if (isInViewport(lazyIframe)) {
lazyIframe.src = lazyIframe.dataset.src;
lazyIframe.classList.remove('lazyload-iframe');
lazyIframes = lazyIframes.filter(function(iframe){ return iframe !== lazyIframe; });
if (lazyIframes.length === 0) {
document.removeEventListener("scroll", lazyLoad);
}
}
});
};
document.addEventListener("scroll", lazyLoad);
window.addEventListener("resize", lazyLoad);
window.addEventListener("orientationchange", lazyLoad);
}
});
function isInViewport(element) {
const rect = element.getBoundingClientRect();
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
rect.right <= (window.innerWidth || document.documentElement.clientWidth)
);
}
在上述代码中，`iframe` 元素的 `src` 属性初始时设置为空字符串或一个无效的 URL（如 `about:blank`）。当 `iframe` 进入可视区域时，通过 JavaScript 动态设置 `src` 属性加载外部页面。
三、注意事项
1. 兼容性问题：虽然现代浏览器大多支持 Intersection Observer API，但部分旧版本浏览器可能不支持。因此，在使用该技术时需要考虑兼容性，并提供相应的降级方案。如上述代码中所示，当浏览器不支持 Intersection Observer API 时，采用滚动事件监听的方式进行兼容处理。
2. 性能优化：在使用懒加载技术时，要注意避免过度监听和不必要的计算，以免影响页面性能。可以通过节流函数等方式对滚动事件等进行处理，提高代码执行效率。例如，在上述视频和 `iframe` 懒加载的示例中，使用了 `isInViewport` 函数来判断元素是否在可视区域内，这个函数可以在每次滚动事件触发时进行调用，以减少不必要的操作。同时，对于大量的资源懒加载，可以考虑分批加载或采用虚拟列表等方式进行优化。
