延迟加载
延迟加载是一种在加载页面时，延迟加载非关键资源的一种方法，而这些非关键资源则在需要时才进行加载，就图像而言，‘非关键’通常指的是‘屏幕外’。
- 延迟加载图像和视频时，可以减少初始页面加载时间、初始页面负载以及系统资源使用量，所有这一切都会对性能产生积极影响。
- 通常来说加载网页时，浏览器会请求所有的图像，而不管它们实在视窗还是在页面的更深处并且不可见。延迟加载允许我们加载可见的图像，并且在用户滚动时按需异步加载其他的图片。这减少了负载请求的数据，并可以大大加快该过程。
延迟加载图像
HTML中的延迟加载内联图像
使用 Intersection Observer。 之前写过的延迟加载代码，有的是使用scroll或resize等时间处理程序来完成任务。这种方式的有点就是各浏览器之间的兼容性最好。但现在浏览器支持通过
Intersection Observer API来检查元素的可见性。这中方式的性能和效率更好。当然并非所有的浏览器都支持Intersection Observer。
与依赖于各种事件处理程序的代码相比，Intersection Observer更容易使用和阅读。只需要注册一个Observer即可监听视元素，就不需要编写冗余的元素可见性检测代码。只需要决定元素可见时需要做什么即可。
![I'm an image!]()
需要关注的三部分：
- class，javascript中选择元素时需要使用的类选择器。
- src，引用页面最初加载时显示的占位符图片。
- data-src和data-srcset，属于占位属性，其中包含元素进入视口后要加载的图片的网址。
接下来使用Intersection Observer实现延迟加载图片。
document.addEventListener('DOMContentLoaded',function(){
const lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));
if ("IntersectionObserver" in window && "IntersectionObserverEntry" in window && "intersectionRatio" in window.IntersectionObserverEntry.prototype) {
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("lazy");
lazyImageObserver.unobserve(lazyImage);
}
});
});
lazyImages.forEach(function(lazyImage) {
lazyImageObserver.observe(lazyImage);
});
}else{
// 对不支持Intersection Observer 其他处理方式
}
})
在DOMContentLoaded事件中，脚本会查询DOM来获取类属性为lazy的所有
实现效果
Intersection Observer来做延迟加载，但是对兼容性要求严格，可以使用polyfill来做兼容处理。但是也可以使用scroll和resize的代码，getBoundingClientRect配合使用的orientationchange事件处理程序，来确定元素是否在视口中。
document.addEventListener("DOMContentLoaded", function() {
let lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));
let active = false;
const lazyLoad = function() {
if (active === false) {
active = true;
setTimeout(function() {
lazyImages.forEach(function(lazyImage) {
if ((lazyImage.getBoundingClientRect().top <= window.innerHeight && lazyImage.getBoundingClientRect().bottom >= 0) && getComputedStyle(lazyImage).display !== "none") {
lazyImage.src = lazyImage.dataset.src;
lazyImage.srcset = lazyImage.dataset.srcset;
lazyImage.classList.remove("lazy");
lazyImages = lazyImages.filter(function(image) {
return image !== lazyImage;
});
if (lazyImages.length === 0) {
document.removeEventListener("scroll", lazyLoad);
window.removeEventListener("resize", lazyLoad);
window.removeEventListener("orientationchange", lazyLoad);
}
}
});
active = false;
}, 200);
}
};
document.addEventListener("scroll", lazyLoad);
window.addEventListener("resize", lazyLoad);
window.addEventListener("orientationchange", lazyLoad);
});
此代码在 scroll 事件处理程序中使用 getBoundingClientRect 来检查是否有任何 img.lazy 元素处于视口中。 使用 setTimeout 调用来延迟处理，active 变量则包含处理状态，用于限制函数调用。 延迟加载图像时，这些元素随即从元素数组中移除。 当元素数组的 length 达到 0 时，滚动事件处理程序代码随即移除。 您可在此 CodePen 示例中，查看代码的实际运行情况。
css中的图像
将通过设置css的background-color属性了调用图片，预加载时不考虑可见性的
这种推测性行为来延迟CSS中的图片加载，方法是使用Javascript来确定元素在视口内，然后将一个类应用于该元素，已应用背景图像的样式。
Here's a hero heading to get your attention!
Here's hero copy to convince you to buy a thing!
Buy a thing!
div.lazy-background元素通常包含有某些CSS调用的大型背景图片。在延迟加载中，可以通过visible来隔离div.lazy-background元素的background-color属性。当元素进入视口时再对其添加这个类。
.lazy-background {
background-image: url("hero-placeholder.jpg"); /* Placeholder image */
}
.lazy-background.visible {
background-image: url("hero.jpg"); /* The final image */
}
通过元素是否在视口内(Intersection Observer)，如果在视口内，则对 div.lazy-background元素添加visible类加载图像；
document.addEventListener("DOMContentLoaded", function() {
var lazyBackgrounds = [].slice.call(document.querySelectorAll(".lazy-background"));
if ("IntersectionObserver" in window) {
let lazyBackgroundObserver = new IntersectionObserver(function(entries, observer) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
entry.target.classList.add("visible");
lazyBackgroundObserver.unobserve(entry.target);
}
});
});
lazyBackgrounds.forEach(function(lazyBackground) {
lazyBackgroundObserver.observe(lazyBackground);
});
}
});
延迟加载视频
在正常情况下加载视屏时，我们使用的是元素。
视频不需要自动播放
使用度量none的preload属性来阻止浏览器预加载任何视频数据。poster属性提供占位符。
视频代替GIF
虽然动画GIF应用广泛，但其在很多方面的表现均不如视频，尤其是在输出文件大小方面。动画GIF的数据大小可达数兆字节，而视觉效果相当的视频往往很小。
gif图片加载时会自动播放，并且会循环播放而且没有声音。
使用 元素进行替代类似于：
autoplay、muted 和 loop 属性的含义不言而喻，而 playsinline 是在 iOS 中进行自动播放所必需。可以跨平台使用的“视频即 GIF”替代方式。Chrome 会自动延迟加载视频，但并不是所有浏览器都会提供这种优化行为。
添加了 poster 属性，您可以使用该属性指定占位符以占用 元素的空间，直到延迟加载视频为止。 与上文中的
document.addEventListener("DOMContentLoaded", function() {
var lazyVideos = [].slice.call(document.querySelectorAll("video.lazy"));
if ("IntersectionObserver" in window) {
var lazyVideoObserver = new IntersectionObserver(function(entries, observer) {
entries.forEach(function(video) {
if (video.isIntersecting) {
for (var source in video.target.children) {
var videoSource = video.target.children[source];
if (typeof videoSource.tagName === "string" && videoSource.tagName === "SOURCE") {
videoSource.src = videoSource.dataset.src;
}
}
video.target.load();
video.target.classList.remove("lazy");
lazyVideoObserver.unobserve(video.target);
}
});
});
lazyVideos.forEach(function(lazyVideo) {
lazyVideoObserver.observe(lazyVideo);
});
}
});
延迟加载 元素时，我们需要对所有的
延迟加载库
参考链接
欢迎访问主页，有更多文章内容
转载请注明原出处
原文链接地址:网页性能优化:延迟加载资源