圖片消極式載入——例子，消極式載入例子
<!doctype html><html><head><meta charset="utf-8"><title>圖片消極式載入</title></head><style>* {margin:0; border:0; padding:0;}div {width:800px; height:280px; margin-bottom:200px;}</style><body><div class="imgContainer" data-hide="true"><img src="img/cat.jpg" data-src="img/01.jpg"/></div><div class="imgContainer" data-hide="true"><img src="img/cat.jpg" data-src="img/02.jpg"/></div><div class="imgContainer" data-hide="true"><img src="img/cat.jpg" data-src="img/03.jpg"/></div><div class="imgContainer" data-hide="true"><img src="img/cat.jpg" data-src="img/04.jpg"/></div><div class="imgContainer" data-hide="true"><img src="img/cat.jpg" data-src="img/05.jpg"/></div><script>(function(){//擷取視口高度var windowHeight = window.innerHeight;//擷取body的高度var bodyHeight = document.body.offsetHeight;//擷取頁面載入時的滾動高度var initScrollTop = document.documentElement.scrollTop || document.body.scrollTop;//擷取圖片包裹塊var imgContainers = document.getElementsByClassName("imgContainer");//頁面載入時的顯示高度var showHeight = initScrollTop + windowHeight; console.log("showHeight = " + showHeight); // 測試：提示頁面載入時的顯示高度var showPics = function(cons, h){console.log("-----enter-----"); // 測試用var len = cons.length;var i;for(i = 0; i < len; i++){var conItem = cons.item(i);//如果某一圖片包裹塊在視口中或其上方，則顯示圖片if(conItem.offsetTop < h){//如果圖片包裹塊中的圖片還未載入，則載入圖片if(conItem.getAttribute("data-hide") == "true"){console.log("show " + i);//改為真實連結var imgs = conItem.getElementsByTagName("img");var iLen = imgs.length;var j;for(j = 0; j < iLen; j++){var tSrc = imgs.item(j).getAttribute("data-src");imgs.item(j).setAttribute("src", tSrc);}conItem.setAttribute("data-hide", "false");// 如果圖片已全部載入，則移除滾動式載入圖片scrollToShow的監聽if(i == (len - 1)){window.removeEventListener("scroll", scrollToShow, false);}}}}console.log("-----leave-----"); // 測試用};// 頁面載入完畢，載入在視口及其上方的圖片showPics(imgContainers, showHeight);var scrollToShow = function(){var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;var h = scrollTop + windowHeight;showPics(imgContainers, h);};window.addEventListener("scroll", scrollToShow, false);}());</script></body></html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
