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