详细了解JavaScript中的延迟加载(2)-木庄网络博客

当前第2页返回上一页

1 2	`// start observing for changes on the target element` `observer.observe(target);`

当观察者为目标设置的阈值达到时，将触发回调。

最后，observe()方法告诉观察者要观察什么目标元素。请注意，交集观察者在它的API中同样有一堆方法:unObserve()、takeRecords()、observe()等是一些例子。

延迟加载技术的优点

现在，我们必须更好地理解为什么延迟加载web内容和资产是必要的。让我们来看看使用这种技术的一些进一步的优势:

构建可高度访问的web应用程序。关于web可访问性的讨论是今天的首要任务。使用这种技术肯定有助于建立一个范围更广的平台
高用户保留。如果web平台与驱动业务目标以及提供价值相关联，那么实现这种技术将有助于使平台变得更加用户友好。web标准稍后会感谢您的!
作为开发人员，您可能需要在web平台上实现无限滚动。理解这一概念将大有帮助，从而提供即时的业务价值

实施延迟加载

让我们来看一个在网页上延迟加载图像的简单例子。我们将开始自定义的选项对象的目标元素，我们打算观察的交集:

let  options = {
root: document.querySelector('.root'),
rootMargin: '0px, 0px, 100px, 0px'
};

现在，对于目标元素，我们来定位几个图像：

1	`let images = [...document.querySelectorAll('.targetImages')];`

现在，让我们看看实现回调:

const callback = (entries) => {
 
entries.forEach(entry => {
 If (entry.isIntersecting) {
    observer.unObserve('entry.target');
}
// handle other code logic here 
})
}

我们可以继续调用交集观察者构造函数来观察目标元素，基于它的options对象中指定的定制:

1	`let observer =` `new` `intersectionObserver(options, callback);`

最后，我们可以观察到要观察的目标元素：

images.forEach(image => {
observer.observe(image);
})

注意:为了简单起见，这里不包括HTML和CSS代码。通过在MDN文档中查看此示例，您可以详细了解如何实现此技术。

总结

现在，当我们在网页上有一堆图像或视频，并在浏览器DOM初始化时加载它们时，这种技术的优势就会非常明显。作为开发人员，我们有责任确保我们管理或维护的平台的最佳性能，特别是当它们与业务目标相关联时。

作为一种web性能技术，延迟加载有助于解决这类问题。

更多编程相关知识，请访问：编程入门！！

以上就是详细了解JavaScript中的延迟加载的详细内容，更多文章请关注木庄网络博客！

返回前面的内容

Vue.js 设计与实现基于Vue.js 3 深入解析Vue.js 设计细节

￥83.86元 人民邮电出版社

本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者

转载请注明出处：木庄网络博客 » 详细了解JavaScript中的延迟加载

详细了解JavaScript中的延迟加载

Vue.js 设计与实现基于Vue.js 3 深入解析Vue.js 设计细节

相关推荐

评论