这并不是插件可以安装的东西，或者至少对您的工作来说是必要的。
但是，您可以自己构建它。
步骤1：将IntersectionObserver polyfill排队，您可以在此处找到：https://github.com/w3c/IntersectionObserver/blob/master/polyfill/intersection-observer.js 以获得对旧浏览器的支持。
步骤2：更改使用背景图像的HTML元素的代码。添加一个类（比如lazybg）并将背景图像放入数据属性（比如data lazybg）。所以你改变了这个：
<div class="mybackgroundimagediv" style="background-image:url(img/myawesomeimage.jpg);"></div>
对此：
<div class="mybackgroundimagediv lazybg" data-lazybg="http://myawesomewebsite.com/img/myawesomeimage.jpg" style=""></div>
步骤3：编写一些javascript来缓慢加载背景图像：
<script>
let lazyObjectObserver = new IntersectionObserver(function(entries, observer) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
let lazyObject = entry.target;
if(!(lazyObject.dataset.lazybg == \'\')){
bgsrc = lazyObject.dataset.lazybg;
lazyObject.style.backgroundImage = \'url(\'+bgsrc+\')\';
lazyObject.classList.remove("lazybg");
lazyObject.dataset.lazybg = \'\';
lazyObjectObserver.unobserve(lazyObject);
}
}
});
},{ rootMargin: "0px 0px 0px 0px" });
document.addEventListener("DOMContentLoaded", function() {
var lazyObjects = [].slice.call(document.querySelectorAll(".lazybg"));
lazyObjects.forEach(function(lazyObject) {
lazyObjectObserver.observe(lazyObject);
});
});
</script>
成功！准备好的div现在将在进入视口时加载背景图像！
