資訊專欄INFORMATION COLUMN
摘要：首先，在頁(yè)面中準(zhǔn)備一個(gè)為的在這個(gè)中放一個(gè)中準(zhǔn)備了一些然而這些都有一個(gè)的屬性，準(zhǔn)備著圖片的地址，具體結(jié)構(gòu)如下圖片的動(dòng)態(tài)加載就是通過(guò)讀取元素，然后獲得元素的屬性的值賦予動(dòng)態(tài)創(chuàng)建的圖片的，從而實(shí)現(xiàn)了圖片的創(chuàng)建。
目前，網(wǎng)絡(luò)上各大論壇，尤其是一些圖片類型的網(wǎng)站上，在圖片加載時(shí)均采用了一種名為懶加載的方式，具體表現(xiàn)為，當(dāng)頁(yè)面被請(qǐng)求時(shí)，只加載可視區(qū)域的圖片，其它部分的圖片則不加載，只有這些圖片出現(xiàn)在可視區(qū)域時(shí)才會(huì)動(dòng)態(tài)加載這些圖片，從而節(jié)約了網(wǎng)絡(luò)帶寬和提高了初次加載的速度，具體實(shí)現(xiàn)的技術(shù)并不復(fù)雜，下面分別對(duì)其說(shuō)明。
首先，在頁(yè)面中準(zhǔn)備一個(gè)id為div1的div,在這個(gè)div中放一個(gè)ul,ul中準(zhǔn)備了一些li,然而這些li都有一個(gè)data-src的屬性，準(zhǔn)備著圖片的地址，具體結(jié)構(gòu)如下：
圖片的動(dòng)態(tài)加載就是通過(guò)讀取li元素，然后獲得li元素的data-src屬性的值賦予動(dòng)態(tài)創(chuàng)建的圖片的src，從而實(shí)現(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);
}
}
那么怎么識(shí)別是否在可視區(qū)域呢？這里需要一個(gè)函數(shù)，能夠?qū)崿F(xiàn)獲得當(dāng)前元素距離網(wǎng)頁(yè)頂部的距離！
//獲得對(duì)象距離頁(yè)面頂端的距離
function getH(obj) {
var h = 0;
while (obj) {
h += obj.offsetTop;
obj = obj.offsetParent;
}
return h;
}
當(dāng)網(wǎng)頁(yè)的滾動(dòng)條滾動(dòng)時(shí)要時(shí)時(shí)判斷當(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)頁(yè)面加載完成以后要主動(dòng)運(yùn)行一下window.onscroll，從而獲得當(dāng)前可視范圍內(nèi)的圖片
window.onload = function () {
window.onscroll();
};
另外，像這樣的頁(yè)面，障眼法和美化都是必須的，比如給每個(gè)li一個(gè)loading的圖片作為背景，從而實(shí)現(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)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/86084.html
摘要：使用默認(rèn)是對(duì)象，如果是是指使用標(biāo)簽，可以跨域，三懶加載和預(yù)加載的對(duì)比兩者都是提高頁(yè)面性能有效的辦法，兩者主要區(qū)別是一個(gè)是提前加載，一個(gè)是遲緩甚至不加載。懶加載對(duì)服務(wù)器前端有一定的緩解壓力作用，預(yù)加載則會(huì)增加服務(wù)器前端壓力。 一、懶加載 1.什么是懶加載 showImg(https://segmentfault.com/img/remote/1460000016666819); 懶加載也...
摘要：使用默認(rèn)是對(duì)象，如果是是指使用標(biāo)簽，可以跨域，三懶加載和預(yù)加載的對(duì)比兩者都是提高頁(yè)面性能有效的辦法，兩者主要區(qū)別是一個(gè)是提前加載，一個(gè)是遲緩甚至不加載。懶加載對(duì)服務(wù)器前端有一定的緩解壓力作用，預(yù)加載則會(huì)增加服務(wù)器前端壓力。 一、懶加載 1.什么是懶加載 showImg(https://segmentfault.com/img/remote/1460000016666819); 懶加載也...
摘要：使用默認(rèn)是對(duì)象，如果是是指使用標(biāo)簽，可以跨域，三懶加載和預(yù)加載的對(duì)比兩者都是提高頁(yè)面性能有效的辦法，兩者主要區(qū)別是一個(gè)是提前加載，一個(gè)是遲緩甚至不加載。懶加載對(duì)服務(wù)器前端有一定的緩解壓力作用，預(yù)加載則會(huì)增加服務(wù)器前端壓力。 一、懶加載 1.什么是懶加載 showImg(https://segmentfault.com/img/remote/1460000016666819); 懶加載也...
摘要：然而，如果前一個(gè)定時(shí)器尚未執(zhí)行，其實(shí)就是替換為一個(gè)新的定時(shí)器，目的是只有在執(zhí)行函數(shù)的請(qǐng)求停止了一段時(shí)間后才執(zhí)行。首先清除之前設(shè)置的任何定時(shí)器，定時(shí)器是儲(chǔ)存在函數(shù)的屬性中的。 導(dǎo)讀 這篇文章中主要介紹一下函數(shù)節(jié)流，然后給了一個(gè)圖片懶加載的例子，說(shuō)圖片懶加載的時(shí)候順帶提了下怎么使用JS獲取頁(yè)面的寬高，卷上去的長(zhǎng)度等。參考來(lái)源主要是《JavaScript高級(jí)程序設(shè)計(jì)》。 函數(shù)節(jié)流 瀏覽器的D...
閱讀 2624·2023-04-25 20:50
閱讀 4019·2023-04-25 18:45
閱讀 2253·2021-11-17 17:00
閱讀 3362·2021-10-08 10:05
閱讀 3108·2019-08-30 15:55
閱讀 3530·2019-08-30 15:44
閱讀 2381·2019-08-29 13:51
閱讀 1142·2019-08-29 12:47
