IntersectionObserver實(shí)現(xiàn)圖片懶加載的示例
更新時(shí)間：2017年09月29日 08:06:32 作者：小小程序猿（^_^）
下面小編就為大家?guī)?lái)一篇IntersectionObserver實(shí)現(xiàn)圖片懶加載的示例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
API：
https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
直接上源碼：
<!DOCTYPE html>
<html>
<header>
<style>
.list-item{
height: 400px;
margin: 5px;
background-color: lightblue;
list-style: none;
}
</style>
</header>
<body>
<li class="list-item"><img class="list-item-img" alt="loading" data-src='./images/icon1.png'></li>
<li class="list-item"><img class="list-item-img" alt="loading" data-src='./images/icon2.png'></li>
<li class="list-item"><img class="list-item-img" alt="loading" data-src='./images/icon3.png'></li>
<li class="list-item"><img class="list-item-img" alt="loading" data-src='./images/icon4.png'></li>
<li class="list-item"><img class="list-item-img" alt="loading" data-src='./images/icon5.png'></li>
<li class="list-item"><img class="list-item-img" alt="loading" data-src='./images/icon6.png'></li>
<script>
var observer = new IntersectionObserver(function(changes) {
console.log(changes);
changes.forEach(function(element, index) {
// statements
if (element.intersectionRatio > 0 && element.intersectionRatio <= 1) {
element.target.src = element.target.dataset.src;
}
});
});
function addObserver() {
var listItems = document.querySelectorAll('.list-item-img');
listItems.forEach(function(item) {
observer.observe(item);
});
}
addObserver();
</script>
</body>
</html>
運(yùn)行代碼后發(fā)現(xiàn)，當(dāng)滾動(dòng)滾動(dòng)軸時(shí)，只有當(dāng)<li>區(qū)域完全顯示出來(lái)后才會(huì)觸發(fā)相應(yīng)的下載圖片的http請(qǐng)求。
兼容瀏覽器：
desktop：
Mobile：
以上這篇IntersectionObserver實(shí)現(xiàn)圖片懶加載的示例就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
alert(3)就這么段程序，沒(méi)有寫(xiě)在function中，想啊想，怎么終止js呢？jfslk也能達(dá)到一樣的效果(終止js程序)2013-05-05
js自動(dòng)閉合html標(biāo)簽(自動(dòng)補(bǔ)全html標(biāo)記)
假如我有一個(gè)DIV，如果沒(méi)有閉合后面的樣式都會(huì)亂了，這樣的代碼可能會(huì)影響后面的樣式，我希望用ＪＳ去自動(dòng)閉合這種沒(méi)有閉合的標(biāo)簽2012-10-10
本文為大家介紹下使用js實(shí)現(xiàn)可以供選擇的彈出框，具體的實(shí)現(xiàn)如下，感性的朋友可以參考下，希望對(duì)大家學(xué)習(xí)有所幫助2013-09-09
深拷貝和淺拷貝是面試中經(jīng)常出現(xiàn)的,主要考察對(duì)基本類(lèi)型和引用類(lèi)型的理解深度,本文主要給大家介紹了js實(shí)現(xiàn)深拷貝和淺拷貝的方式,需要的朋友可以參考下2022-05-05
這篇文章主要介紹了一些Javascript中的奇葩知識(shí)，幫助大家更好的理解和使用JavaScript，感興趣的朋友可以了解下2021-01-01
jqgrid 表格數(shù)據(jù)導(dǎo)出實(shí)例
jqgrid并沒(méi)有自帶導(dǎo)出表格數(shù)據(jù)的方法，這里就自己實(shí)現(xiàn)了一個(gè)，嘗試過(guò)在頁(yè)面直接將數(shù)據(jù)導(dǎo)出，發(fā)現(xiàn)只有IE下可以通過(guò)調(diào)用saveas來(lái)實(shí)現(xiàn)，但是別的瀏覽器不支持，于是考慮將數(shù)據(jù)傳回后臺(tái)，然后后臺(tái)返回下載文件來(lái)實(shí)現(xiàn)2013-11-11
這篇文章介紹了JavaScript的防抖和節(jié)流案例的代碼實(shí)現(xiàn)和概念.包含詳細(xì)的代碼,希望對(duì)你有所幫助2021-06-06
js實(shí)現(xiàn)鼠標(biāo)滑過(guò)文字鏈接色彩變化的效果
這篇文章主要介紹了js實(shí)現(xiàn)鼠標(biāo)滑過(guò)文字鏈接色彩變化的效果,涉及javascript鼠標(biāo)事件及樣式操作的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-05-05
ECMA5數(shù)組的新增方法有哪些及forEach（）模仿實(shí)現(xiàn)
這篇文章主要介紹了ECMA5數(shù)組的新增方法有哪些及forEach（）模仿實(shí)現(xiàn),需要的朋友可以參考下2015-11-11
淺談js數(shù)據(jù)類(lèi)型判斷與數(shù)組判斷
下面小編就為大家?guī)?lái)一篇淺談js數(shù)據(jù)類(lèi)型判斷與數(shù)組判斷。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-08