資訊專欄INFORMATION COLUMN
摘要：首先，在頁面中準備一個為的在這個中放一個中準備了一些然而這些都有一個的屬性，準備著圖片的地址，具體結(jié)構(gòu)如下圖片的動態(tài)加載就是通過讀取元素，然后獲得元素的屬性的值賦予動態(tài)創(chuàng)建的圖片的，從而實現(xiàn)了圖片的創(chuàng)建。
目前，網(wǎng)絡(luò)上各大論壇，尤其是一些圖片類型的網(wǎng)站上，在圖片加載時均采用了一種名為懶加載的方式，具體表現(xiàn)為，當(dāng)頁面被請求時，只加載可視區(qū)域的圖片，其它部分的圖片則不加載，只有這些圖片出現(xiàn)在可視區(qū)域時才會動態(tài)加載這些圖片，從而節(jié)約了網(wǎng)絡(luò)帶寬和提高了初次加載的速度，具體實現(xiàn)的技術(shù)并不復(fù)雜，下面分別對其說明。
首先，在頁面中準備一個id為div1的div,在這個div中放一個ul,ul中準備了一些li,然而這些li都有一個data-src的屬性，準備著圖片的地址，具體結(jié)構(gòu)如下：
圖片的動態(tài)加載就是通過讀取li元素，然后獲得li元素的data-src屬性的值賦予動態(tài)創(chuàng)建的圖片的src，從而實現(xiàn)了圖片的創(chuàng)建。
function setImg(index){
var oDiv=document.getElementById("div1")
var oUl=oDiv.children[0];
var aLi=oUl.children;
if (aLi[index].dataset) {
var src=aLi[index].dataset.src;
} else{
var src=aLi[index].getAttribute("data-src");
}
var oImg=document.createElement("img");
oImg.src=src;
if (aLi[index].children.length==0) {
aLi[index].appendChild(oImg);
}
}
那么怎么識別是否在可視區(qū)域呢？這里需要一個函數(shù)，能夠?qū)崿F(xiàn)獲得當(dāng)前元素距離網(wǎng)頁頂部的距離！
//獲得對象距離頁面頂端的距離
function getH(obj) {
var h = 0;
while (obj) {
h += obj.offsetTop;
obj = obj.offsetParent;
}
return h;
}
當(dāng)網(wǎng)頁的滾動條滾動時要時時判斷當(dāng)前l(fā)i的位置！
window.onscroll = function () {
var oDiv = document.getElementById("div1");
var oUl = oDiv.children[0];
var aLi = oUl.children;
for (var i = 0, l = aLi.length; i < l; i++) {
var oLi = aLi[i];
//檢查oLi是否在可視區(qū)域
var t = document.documentElement.clientHeight + (document.documentElement.scrollTop || document.body.scrollTop);
var h = getH(oLi);
if (h < t) {
setTimeout("setImg(" + i + ")", 500);
}
}
};
當(dāng)頁面加載完成以后要主動運行一下window.onscroll，從而獲得當(dāng)前可視范圍內(nèi)的圖片
window.onload = function () {
window.onscroll();
};
另外，像這樣的頁面，障眼法和美化都是必須的，比如給每個li一個loading的圖片作為背景，從而實現(xiàn)了當(dāng)前圖片正在加載的效果，美化工作就是做好合理的布局。
* {
margin: 0;
padding: 0;
}
#div1 {
width: 520px;
margin: 30px auto;
border: 1px solid red;
overflow: hidden;
}
li {
width: 160px;
height: 160px;
float: left;
list-style: none;
margin: 5px;
background: url(loading.gif) center center no-repeat;
border: 1px dashed green;
}
img{
width:100%
}
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/86084.html
摘要：使用默認是對象，如果是是指使用標簽，可以跨域，三懶加載和預(yù)加載的對比兩者都是提高頁面性能有效的辦法，兩者主要區(qū)別是一個是提前加載，一個是遲緩甚至不加載。懶加載對服務(wù)器前端有一定的緩解壓力作用，預(yù)加載則會增加服務(wù)器前端壓力。 一、懶加載 1.什么是懶加載 showImg(https://segmentfault.com/img/remote/1460000016666819); 懶加載也...
摘要：使用默認是對象，如果是是指使用標簽，可以跨域，三懶加載和預(yù)加載的對比兩者都是提高頁面性能有效的辦法，兩者主要區(qū)別是一個是提前加載，一個是遲緩甚至不加載。懶加載對服務(wù)器前端有一定的緩解壓力作用，預(yù)加載則會增加服務(wù)器前端壓力。 一、懶加載 1.什么是懶加載 showImg(https://segmentfault.com/img/remote/1460000016666819); 懶加載也...
摘要：使用默認是對象，如果是是指使用標簽，可以跨域，三懶加載和預(yù)加載的對比兩者都是提高頁面性能有效的辦法，兩者主要區(qū)別是一個是提前加載，一個是遲緩甚至不加載。懶加載對服務(wù)器前端有一定的緩解壓力作用，預(yù)加載則會增加服務(wù)器前端壓力。 一、懶加載 1.什么是懶加載 showImg(https://segmentfault.com/img/remote/1460000016666819); 懶加載也...
摘要：然而，如果前一個定時器尚未執(zhí)行，其實就是替換為一個新的定時器，目的是只有在執(zhí)行函數(shù)的請求停止了一段時間后才執(zhí)行。首先清除之前設(shè)置的任何定時器，定時器是儲存在函數(shù)的屬性中的。 導(dǎo)讀 這篇文章中主要介紹一下函數(shù)節(jié)流，然后給了一個圖片懶加載的例子，說圖片懶加載的時候順帶提了下怎么使用JS獲取頁面的寬高，卷上去的長度等。參考來源主要是《JavaScript高級程序設(shè)計》。 函數(shù)節(jié)流 瀏覽器的D...
閱讀 2658·2023-04-25 20:50
閱讀 4140·2023-04-25 18:45
閱讀 2287·2021-11-17 17:00
閱讀 3395·2021-10-08 10:05
閱讀 3150·2019-08-30 15:55
閱讀 3588·2019-08-30 15:44
閱讀 2413·2019-08-29 13:51
閱讀 1181·2019-08-29 12:47
