我們在瀏覽淘寶京東等大型購物網頁時會經常出現許多圖片而圖片需要花費我們非常多的流量問題。 我們在寫網頁的時候怎麼解決這個問題呢？這時候就要用到我們圖片懶載入的問題，這樣不僅可以 解決流量問題，也提高了性能等等。 下麵我們就來看一下圖片的懶載入怎麼問題。 ...
我們在瀏覽淘寶京東等大型購物網頁時會經常出現許多圖片而圖片需要花費我們非常多的流量問題。
我們在寫網頁的時候怎麼解決這個問題呢？這時候就要用到我們圖片懶載入的問題，這樣不僅可以
解決流量問題，也提高了性能等等。
下麵我們就來看一下圖片的懶載入怎麼問題。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
list-style-type: none;
}
html,body{
width: 100%;
height: 100%;
}
#div div{
width: 400px;
height: 500px;
/*border:1px solid #000;*/
display: inline-block;
margin:10px;
}
img{
width: 100%;
height: 100%;
}
</style>
<script>
// 獲取距離父級距離
function getPos(obj) {
var t=0;//先聲明兩個變數 用來存儲距離上面的高度 距離左邊的高度
var l=0;
while (obj){//迴圈判斷這個元素是否存在，存在才執行這個方法
t+=obj.offsetTop; // 加上距離父級的距離
l+=obj.offsetLeft;
obj=obj.offsetParent;// 有父級讓他變成他的父級
}
return {left:l,top:t}; //把值傳出去
}
window.onload=window.onscroll=function () {//滾動的時候和頁面載入時執行的一樣
var aImg=document.getElementsByTagName('img');//獲取所有的元素img元素
var oSCrollT=document.body.scrollTop || document.documentElement.scrollTop;// 滾動條滾動高度
var oClh=document.documentElement.clientHeight;//可視區的高度
var oScr=oSCrollT + oClh; // 滾動條高度 + 可視區的高度
for(var i=0;i<aImg.length;i++){ //迴圈所有的img，把它距離頁面頂部的距離 和 滾動高度+可視區的高度進行比較
if(oScr > getPos(aImg[i]).top){
aImg[i].src=aImg[i].getAttribute('_src'); //給src屬性賦值
}
}
}
</script>
</head>
<body>
<div id="div">
<div><img _src="img/1.jpg"></div>
<div><img _src="img/2.jpg"></div>
<div><img _src="img/3.jpg"></div>
<div><img _src="img/4.jpg"></div>
<div><img _src="img/5.jpg"></div>
<div><img _src="img/6.jpg"></div>
<div><img _src="img/7.jpg"></div>
<div><img _src="img/8.jpg"></div>
<div><img _src="img/9.jpg"></div>
<div><img _src="img/10.jpg"></div>
<div><img _src="img/11.jpg"></div>
<div><img _src="img/12.jpg"></div>
<div><img _src="img/13.jpg"></div>
<div><img _src="img/14.jpg"></div>
<div><img _src="img/15.jpg"></div>
</div>
</body>
</html>
今天的內容就到這裡，你學會了嗎？
