x-note
Search…
懒加载资源
如果加载用户可能永远看不到的内容,会占用网络带宽,浪费处理时间,电池和其他系统资源。
懒加载是一种解决该类常见的优化方案。 在页面加载时,推迟非关键资源的加载可以带来非常客观的性能提升。

懒加载图片

在涉及图像的地方,“非关键”通常等同于“屏幕外”。

懒加载 元素中使用的图像

<img/> 的 loading 属性

大多数现代浏览器上的 <img/> 均支持了 loading 属性。
loading 属性支持的值:
  • auto:浏览器的默认延迟加载行为,与不包含该属性的行为相同。在规范中未提及该值。
  • lazy:将资源的加载推迟到到达可视窗口的某个距离为止。
  • eager:立即加载资源,而不管其在页面上的位置。
距离阈值不是固定的,并且取决于几个因素:
  • 正在获取的图像资源的类型
  • 是否在 Android 版 Chrome 上启用了精简模式
例如,当前 Chrome 版本在快速连接(例如 4G)上的距视口的距离阈值为 1250px; 在较慢的连接(例如 3G)上,阈值为 2500px。
使用 loading 属性时,图片应该指定 widthheight
浏览器加载图像时,除非明确指定尺寸,否则它不会立即知道图像的尺寸。 为了使浏览器能够在页面上为图像保留足够的空间,建议所有<img>标记都同时包含 width 和 height 属性。
固定图片高宽还能很好的避免布局偏移
1
<img src="image.png" loading="lazy" alt="" width="200" height="200" />
Copied!
使用<picture>元素定义的图像也可以延迟加载:
1
<picture>
2
<source media="(min-width: 800px)" srcset="large.jpg 1x, larger.jpg 2x" />
3
<img src="photo.jpg" loading="lazy" />
4
</picture>
Copied!
如果没有指定 widthheight,图像初始尺寸是 0×0 像素。 因为图像实际上都不会占用空间,也不会将图像推离屏幕,浏览器可能会在一开始确认图像在视图窗口中。 也就是说浏览器会加载所有未指定高宽的图片。
loading 属性的兼容方案:
1
<script>
2
if ('loading' in HTMLImageElement.prototype) {
3
const images = document.querySelectorAll('img[loading="lazy"]');
4
images.forEach((img) => {
5
img.src = img.dataset.src;
6
});
7
} else {
8
// polyfill
9
// use IntersectionObserver if support it
10
// else use `getBoundingClientRect`
11
}
12
</script>
Copied!
<iframe loading=lazy> 已被标准化,并已在 Chromium 中实施。

基于 IntersectionObserver

IntersectionObserver 供了一种异步观察目标元素与其祖先元素或顶级文档视窗(viewport)交叉状态的方法。
1
document.addEventListener('DOMContentLoaded', () => {
2
const lazyImages = [].slice.call(document.querySelectorAll('img.lazy'));
3
4
if ('IntersectionObserver' in window) {
5
const options = {
6
root: document,
7
rootMargin: '0px',
8
threshold: 1.0
9
};
10
11
const lazyImageObserver = new IntersectionObserver((
12
entries,
13
observer,
14
) => {
15
entries.forEach((entry) => {
16
if (entry.isIntersecting) {
17
const lazyImage = entry.target;
18
lazyImage.src = lazyImage.dataset.src;
19
lazyImage.srcset = lazyImage.dataset.srcset;
20
lazyImage.classList.remove('lazy'); // for lazy load css img
21
lazyImageObserver.unobserve(lazyImage);
22
}
23
});
24
}, options);
25
26
lazyImages.forEach(lazyImage) => {
27
lazyImageObserver.observe(lazyImage);
28
});
29
} else {
30
// Possibly fall back to event handlers here
31
}
32
});
Copied!

基于 getBoundingClientRect

Element.getBoundingClientRect() 方法返回元素的大小及其相对于视口的位置。
1
const inView = (element, offset = 0) => {
2
const rect = element.getBoundingClientRect();
3
return (
4
rect.top <= window.innerHeight + offset &&
5
rect.bottom >= -offset &&
6
rect.right <= window.innerWidth + offset &&
7
rect.left >= -offset &&
8
getComputedStyle(element).style.display !== 'none'
9
);
10
};
11
12
document.addEventListener('DOMContentLoaded', () => {
13
const lazyImages = [].slice.call(document.querySelectorAll('img.lazy'));
14
let active = false;
15
16
const lazyLoad = () => {
17
if (active === false) {
18
active = true;
19
20
setTimeout(() => {
21
lazyImages.forEach((lazyImage) => {
22
const offset = 0;
23
24
if (inView(lazyImage, offset)) {
25
lazyImage.src = lazyImage.dataset.src;
26
lazyImage.srcset = lazyImage.dataset.srcset;
27
lazyImage.classList.remove('lazy'); // for lazy load css img
28
29
lazyImages = lazyImages.filter((image) => image !== lazyImage);
30
31
if (lazyImages.length === 0) {
32
document.removeEventListener('scroll', lazyLoad);
33
window.removeEventListener('resize', lazyLoad);
34
window.removeEventListener('orientationchange', lazyLoad);
35
}
36
}
37
});
38
39
active = false;
40
}, 200);
41
}
42
};
43
44
document.addEventListener('scroll', lazyLoad);
45
window.addEventListener('resize', lazyLoad);
46
window.addEventListener('orientationchange', lazyLoad);
47
});
Copied!

懒加载 CSS 中的图片

浏览器会在请求外部资源之前检查 CSS 是否应用于 Document。 对于 CSS 中的图片可以通过不同的 class 进行图片懒加载。
1
<div class="background lazy-background">
2
<h1>Here's a hero heading to get your attention!</h1>
3
<p>Here's hero copy to convince you to buy a thing!</p>
4
<a href="/buy-a-thing">Buy a thing!</a>
5
</div>
Copied!
1
.background {
2
background-image: url('hero.jpg'); /* The final image */
3
}
4
5
.lazy-background {
6
background-image: url('hero-placeholder.jpg') !import; /* Placeholder image */
7
}
Copied!
1
if (inView(element)) {
2
element.classList.remove('lazy-background');
3
}
Copied!

懒加载视频

与图像一样,也可以延迟加载视频。 如何延迟加载<video>取决于用例。

不自动播放的视频

不自动播放的视频需要在元素上指定 preload 属性为 none 来防止浏览器预加载任何视频数据。 当用户启动播放时,使用 preload="none" 是在所有平台上推迟视频加载的最简单方法。
1
<video controls preload="none" poster="one-does-not-simply-placeholder.jpg">
2
<source src="one-does-not-simply.webm" type="video/webm" />
3
<source src="one-does-not-simply.mp4" type="video/mp4" />
4
</video>
Copied!

自动播放的视频

<img> 延迟加载示例一样,将视频 URL 存储 data-src 在每个<source> 元素的属性中。
使用 <video> 元素替代 Gif 动画:
1
<video
2
autoplay
3
muted
4
loop
5
playsinline
6
width="610"
7
height="254"
8
poster="one-does-not-simply.jpg"
9
>
10
<source data-src="one-does-not-simply.webm" type="video/webm" />
11
<source data-src="one-does-not-simply.mp4" type="video/mp4" />
12
</video>
Copied!
1
document.addEventListener('DOMContentLoaded', () => {
2
const lazyVideos = [].slice.call(document.querySelectorAll('video.lazy'));
3
4
if ('IntersectionObserver' in window) {
5
const options = {
6
root: document,
7
rootMargin: '0px',
8
threshold: 1.0,
9
};
10
const lazyVideoObserver = new IntersectionObserver((entries, observer) => {
11
entries.forEach((video) => {
12
if (video.isIntersecting) {
13
for (let source in video.target.children) {
14
let videoSource = video.target.children[source];
15
if (
16
typeof videoSource.tagName === 'string' &&
17
videoSource.tagName === 'SOURCE'
18
) {
19
videoSource.src = videoSource.dataset.src;
20
}
21
}
22
23
video.target.load();
24
video.target.classList.remove('lazy');
25
lazyVideoObserver.unobserve(video.target);
26
}
27
});
28
}, options);
29
30
lazyVideos.forEach((lazyVideo) => {
31
lazyVideoObserver.observe(lazyVideo);
32
});
33
}
34
});
Copied!

懒加载 JS 资源

ECMAScript 支持 dynamic import 支持按需加载资源。 此外还有 AMD 以及 SystemJS 等规范。
Webpack,Rollup 等 bundle 工具均对此有很好的支持。
1
const LazyComponent = React.lazy(() => import('script.js'));
Copied!