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

if(element.intersectionRatio > 0) {

// 放弃监听，防止性能浪费，并加载图片。

observer.unobserve(element.target);

element.target.src = http://www.veick.cn/news/element.target.dataset.src;

}

});

functioninitObserver{

constlistItems = document.querySelectorAll( '.list-item-img');

listItems. forEach( function(item){

// 对每个list元素进行监听

observer.observe(item);

});

}

initObserver;

运行代码并观察控制台的Network，会发现图片随着可视区域的移动而加载，我们的目的达到了。

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