本文實(shí)例為大家分享了javascript實(shí)現(xiàn)圖片預(yù)加載和懶加載的具體代碼，供大家參考，具體內(nèi)容如下
預(yù)加載
預(yù)加載是預(yù)先加載好后面需要用到的資源, 后面使用的時(shí)候直接去緩存里取。舉個(gè)栗子, 比如一個(gè)網(wǎng)站的開場動(dòng)畫, 這些動(dòng)畫是由很多圖片組成的, 假如不預(yù)先加載好, 那就會(huì)造成動(dòng)畫不流暢產(chǎn)生閃動(dòng)白屏。圖片是提高用戶體驗(yàn)的一個(gè)很好方法。圖片預(yù)先加載到瀏覽器中，保證了圖片快速、無縫地發(fā)布，使用戶在瀏覽你網(wǎng)站內(nèi)容時(shí)獲得更好的用戶體驗(yàn)。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
|
//這里我把圖片數(shù)量寫死了，而且對圖片名也有要求必須是阿拉伯?dāng)?shù)字后綴為jpg//下面注釋還會(huì)介紹另一種方法,兩者選一個(gè)就行，當(dāng)然也可以把你的方法留在評(píng)論區(qū)共同學(xué)習(xí)function preload() { for(var i=1;i<13;i++){ var img=[]; img[i]=new Image();//創(chuàng)建一個(gè)img對象 img[i].src="img/"+i+".jpg" }}/*function preload() { img1=new Image();//創(chuàng)建一個(gè)img對象 img1.src="xxx/xxx/xxx.jpg"//圖片地址 img2=new Image(); img2.src="xxx/xxx/xxx.jpg" img3=new Image(); img3.src="xxx/xxx/xxx.jpg" img4=new Image(); img4.src="xxx/xxx/xxx.jpg" ...... }}*/// 定義了一個(gè)函數(shù)，帶一個(gè)參數(shù)funfunction addLoadEvent(fun) { // 把已經(jīng)加載完成的函數(shù)賦值給oldnload變量 var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = fun; } else { window.onload = function() { // 這里執(zhí)行了剛才賦值變量的函數(shù) oldonload(); // 這里是執(zhí)行了傳進(jìn)來的func參數(shù) fun(); } }}addLoadEvent(preload());/* oldonload是自己定義的變量，并給他賦值了onload事件，onload 事件會(huì)在頁面或圖像加載完成后立即發(fā)生。 onload是在頁面和圖像加載后執(zhí)行的事件，但在實(shí)際使用中若多次給onload賦值，則onload會(huì)被后復(fù)制的方法給覆蓋，也就意味著onload只會(huì)執(zhí)行最后賦值的方法。 fun()是傳入的參數(shù)，此處fun()就是preload()。這段代碼表達(dá)的含義就是： 如果(typeof window.onload != 'function')也就是說window.onload還沒有被賦值，就直接把它賦值為fun。 否則，說明有程序先對其賦值了，那么在頁面加載完成之后，應(yīng)該先執(zhí)行現(xiàn)有函數(shù)再執(zhí)行自己的新的fun。 即，此段代碼保證了onload中原有加載的方法執(zhí)行（且先執(zhí)行），防止fun方法執(zhí)行（圖片預(yù)加載）時(shí)將其覆蓋。*/ |
這里可以看到圖片已經(jīng)經(jīng)加載出來了
懶加載
可以有效避免同一時(shí)間瀏覽器需要加載過多的圖片，同時(shí)開啟過多的http請求，導(dǎo)致網(wǎng)頁加載速度變慢。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
|
/*先將照片路徑存放在一個(gè)自定義屬性中，src中存放一個(gè)正在加載的gif，等圖片到了顯示區(qū)域時(shí)再用js將自定義屬性替換到src里，圖片顯示出來。將所有需要按需加載的圖片獲取到一個(gè)集合，滾動(dòng)滾動(dòng)條的時(shí)候判斷哪些圖片出現(xiàn)在了可視區(qū)域內(nèi)，出現(xiàn)了就執(zhí)行一個(gè)加載的操作。加載完成后就將這個(gè)圖片移出集合或者數(shù)組中去，最后數(shù)組內(nèi)需要加載的圖片就會(huì)越來越少。*/<div> <img src="img/lode.img" data-src="img/1.img" class="lazylode"> <img src="img/lode.img" data-src="img/2.img" class="lazylode"> <img src="img/lode.img" data-src="img/3.img" class="lazylode"> <img src="img/lode.img" data-src="img/4.img" class="lazylode"> <img src="img/lode.img" data-src="img/5.img" class="lazylode"> <img src="img/lode.img" data-src="img/6.img" class="lazylode"> <img src="img/lode.img" data-src="img/7.img" class="lazylode"> <img src="img/lode.img" data-src="img/8.img" class="lazylode"></div><script> var lazylode=document.querySelectorAll('.lazylode');//獲取的是類數(shù)組對象，只有item（）方法和length屬性沒有數(shù)組對象的方法var imgArr=Array.prototype.slice.call(lazylode);//將類數(shù)組轉(zhuǎn)化為數(shù)組lazylodeImg();//要執(zhí)行的懶加載方法，一開始應(yīng)該先執(zhí)行一次懶加載，讓顯示區(qū)域內(nèi)的圖片加載出來var timer;window.addEventListener('scroll',function(){ clearTimeout(timer);//節(jié)流 timer=setTimeout(function(){ lazylodeImg();//屏幕滾動(dòng)執(zhí)行懶加載 },100);},false)function lazylodeImg(){ for(var i=0;i<imgArr.length;i++){ if(isVisibleArea(imgArr[i])){//判斷是否在可視區(qū)域內(nèi) imgArr[i].src=imgArr[i].getAttribute('data-src'); //修改src為自定義的屬性 imgArr.splice(i,1);//將數(shù)組中已加載的圖片移除數(shù)組 i--; //因?yàn)閺臄?shù)組中刪除了下標(biāo)為1的數(shù)，那么原來下標(biāo)為2的數(shù)就進(jìn)位為1了 } }}function isVisibleArea(el){ var rect=el.getBoundingClientRect(); //獲取元素距離可視區(qū)域的top，left等值 return rect.bottom>0 && rect.top<window.innerHeight && rect.right>0 && rect.left<window.innerHeight; //都為真才會(huì)返回true}</script> |
不光是圖片，js，css文件等都可以按需加載，創(chuàng)建一個(gè)script或者link標(biāo)簽，讓后在里面添加要呈現(xiàn)的效果，添加到body或者h(yuǎn)eader里面，執(zhí)行完滾動(dòng)事件后js或者css文件已經(jīng)加載完成，移除屏幕滾動(dòng)事件。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持服務(wù)器之家。
原文鏈接：https://blog.csdn.net/aaahuahua/article/details/114692375
