@程序员，一文掌握 Web 应用中的图片优化技巧！( 七 )

2019-08-29

IntersectionObserver提供给我们一项能力：可以用来监听元素是否进入了设备的可视区域之内，这意味着我们等待图片元素进入可视区域后，再决定是否加载它，毕竟用户没看到图片前，根本不关心它是否已经加载了。这是Chrome51率先提出和支持的API，而在2019年的今天，各大浏览器对它的支持度已经有所改善(除了IE，全线崩~)：

废话不多说，上代码。首先，假设我们有一个图片列表，它们的src属性我们暂不设置，而用data-src来替代：

这样会导致图片无法加载，这当然不是我们的目的，我们想做的是，当IntersectionObserver监听到图片元素进入可视区域时，将data-src"还给"src属性，这样我们就可以实现图片加载了：

constobserver = newIntersectionObserver( function(changes){

changes. forEach( function(element, index){

// 当这个值大于0，说明满足我们的加载条件了，这个值可通过rootMargin手动设置

推荐阅读

上一篇：安恒信息刘博：人工智能为网络安全带来新机遇

下一篇：上海的这家智慧酒店，像是从哆啦A梦的兜里掏出来的