所以我找到了一段延迟加载图片的代码。而且效果很好。
这是代码:
document.addEventListener("DOMContentLoaded", function() {
var lazyloadImages = document.querySelectorAll("img.lazy");
var lazyloadThrottleTimeout;
function lazyload () {
if(lazyloadThrottleTimeout) {
clearTimeout(lazyloadThrottleTimeout);
}
lazyloadThrottleTimeout = setTimeout(function() {
var scrollTop = window.pageYOffset;
lazyloadImages.forEach(function(img) {
if(img.offsetTop < (window.innerHeight + scrollTop)) {
img.src = img.dataset.src;
img.classList.remove('lazy');
}
});
if(lazyloadImages.length == 0) {
document.removeEventListener("scroll", lazyload);
window.removeEventListener("resize", lazyload);
window.removeEventListener("orientationChange", lazyload);
}
}, 20);
}
document.addEventListener("scroll", lazyload);
window.addEventListener("resize", lazyload);
window.addEventListener("orientationChange", lazyload);
});
问题是我还需要延迟加载视频,所以我将 img 更改为 source,
var lazyloadImages = document.querySelectorAll("img.lazy");
到
var lazyloadVideos = document.querySelectorAll("source.lazy");
我认为它会起作用,但它不起作用,我不知道为什么,有人可以帮助我或指出正确的方向。
这是我更改的完整代码:
document.addEventListener("DOMContentLoaded", function() {
var lazyloadVideos = document.querySelectorAll("source.lazy");
var lazyloadThrottleTimeout;
function lazyload () {
if(lazyloadThrottleTimeout) {
clearTimeout(lazyloadThrottleTimeout);
}
lazyloadThrottleTimeout = setTimeout(function() {
var scrollTop = window.pageYOffset;
lazyloadVideos.forEach(function(source) {
if(source.offsetTop < (window.innerHeight + scrollTop)) {
source.src = source.dataset.src;
source.classList.remove('lazy');
}
});
if(lazyloadVideos.length == 0) {
document.removeEventListener("scroll", lazyload);
window.removeEventListener("resize", lazyload);
window.removeEventListener("orientationChange", lazyload);
}
}, 20);
}
document.addEventListener("scroll", lazyload);
window.addEventListener("resize", lazyload);
window.addEventListener("orientationChange", lazyload);
});
这些是 HTML 行:
<video loop class="image" onmouseover="this.play()" onmouseout="this.pause()">
<source data-src="allvideos/1.mp4" type="video/mp4" class="lazy">
</video>