<!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>
圖片延遲加載——例子
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
二級域名共享主機IP和端口
個人網站原文地址：http://www.chengweinan.com/article/31 今天在個人網站上新增了一個“極客頻道”，使用的是二級域名geek.chengweinan.com。 新站點