網站優化--圖片的預載入與懶載入（上）
阿新 • • 發佈：2019-01-29
1、延遲載入即懶載入，主要目的是作為伺服器前端的優化，減少請求數或延遲請求數，在一些圖片非常多的網站中非常有用，當圖片位置進入到可視區的時候才會被載入，這樣對於含有很多 圖片的比較長的網頁來說，可以載入的更快，並且還能節省伺服器頻寬
最常用的方式是：監控滾動條的高度，當滾動條高度和可視區高度之和小於圖片位置距離頁面的高度時會被載入
2、預載入：在檢視前面張圖片的時候載入後面的圖片，在提升使用者體驗的同時會增加伺服器的壓力
常用方式：建立image物件，通過src屬性載入url資源，當資源載入完成後，資源會被放在快取中，當再次呼叫url的時候從快取中讀取
兩種技術的本質：兩者的行為是相反的，一個是提前載入，一個是遲緩甚至不載入。懶載入對伺服器前端有一定的緩解壓力作用，預載入則會增加伺服器前端壓力
懶載入：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="../css/public.css"/> <style type="text/css"> #list{width: 1250px;margin: 100px auto 0;} li{float:left;width: 300px;height: 400px;border: 1px solid #999;margin: 10px 0 10px 10px;} img{width: 100%;height: 100%;} </style> <script type="text/javascript" src="../js/rainbow.js"></script> <script type="text/javascript"> window.onload=function(){ var oUl=document.getElementById("list"); var aImg=oUl.getElementsByTagName('img'); function showImg(){ for(var i=0;i<aImg.length;i++){ var scrollTop=document.documentElement.scrollTop || document.body.scrollTop; //先判斷圖片之前是否被載入，能省去計算高度之和 if(!aImg[i].isLoad && getPos(aImg[i]).top<scrollTop +document.documentElement.clientHeight){ aImg[i].src=aImg[i].getAttribute('_src'); //通過這個自定義屬性設定檢視過的圖片不重新載入 aImg[i].isLoad=true; //console.log(i); } } } showImg(); window.onscroll=function(){ showImg(); } } </script> </head> <body> <ul id="list"> <li><img _src="https://img.alicdn.com/bao/uploaded/i1/TB1ULxzOpXXXXX.XVXXSutbFXXX.jpg_240x5000Q75s0.jpg_.webp"/></li> <li><img _src="https://img.alicdn.com/bao/uploaded/i1/TB1uf0kOpXXXXbHXVXXSutbFXXX.jpg_240x5000Q75s0.jpg_.webp"/></li> <li><img _src="https://img.alicdn.com/bao/uploaded/i1/TB1oJpqOpXXXXa8XVXXSutbFXXX.jpg_240x5000Q75s0.jpg_.webp"/></li> <li><img _src="https://img.alicdn.com/bao/uploaded/i1/TB1ombGMVXXXXXQXFXXSutbFXXX.jpg_240x5000Q75s0.jpg_.webp"/></li> <li><img _src="https://img.alicdn.com/bao/uploaded/i1/TB1vmzRMVXXXXcSXpXXSutbFXXX.jpg_240x5000Q75s0.jpg_.webp"/></li> <li><img _src="https://img.alicdn.com/bao/uploaded/i1/TB1UIhGOpXXXXcOXXXXSutbFXXX.jpg_240x5000Q75s0.jpg_.webp"/></li> <li><img _src="https://img.alicdn.com/bao/uploaded/i1/TB1s7DiMVXXXXcbaXXXSutbFXXX.jpg_240x5000Q75s0.jpg_.webp"/></li> <li><img _src="https://img.alicdn.com/bao/uploaded/i1/TB1wBlcOpXXXXXTapXXSutbFXXX.jpg_240x5000Q75s0.jpg_.webp"/></li> <li><img _src="https://img.alicdn.com/bao/uploaded/i1/TB1ULxzOpXXXXX.XVXXSutbFXXX.jpg_240x5000Q75s0.jpg_.webp"/></li> <li><img _src="https://img.alicdn.com/bao/uploaded/i1/TB1uf0kOpXXXXbHXVXXSutbFXXX.jpg_240x5000Q75s0.jpg_.webp"/></li> <li><img _src="https://img.alicdn.com/bao/uploaded/i1/TB1oJpqOpXXXXa8XVXXSutbFXXX.jpg_240x5000Q75s0.jpg_.webp"/></li> <li><img _src="https://img.alicdn.com/bao/uploaded/i1/TB1ombGMVXXXXXQXFXXSutbFXXX.jpg_240x5000Q75s0.jpg_.webp"/></li> <li><img _src="https://img.alicdn.com/bao/uploaded/i1/TB1vmzRMVXXXXcSXpXXSutbFXXX.jpg_240x5000Q75s0.jpg_.webp"/></li> <li><img _src="https://img.alicdn.com/bao/uploaded/i1/TB1UIhGOpXXXXcOXXXXSutbFXXX.jpg_240x5000Q75s0.jpg_.webp"/></li> <li><img _src="https://img.alicdn.com/bao/uploaded/i1/TB1s7DiMVXXXXcbaXXXSutbFXXX.jpg_240x5000Q75s0.jpg_.webp"/></li> <li><img _src="https://img.alicdn.com/bao/uploaded/i1/TB1wBlcOpXXXXXTapXXSutbFXXX.jpg_240x5000Q75s0.jpg_.webp"/></li> <li><img _src="https://img.alicdn.com/bao/uploaded/i1/TB1ULxzOpXXXXX.XVXXSutbFXXX.jpg_240x5000Q75s0.jpg_.webp"/></li> <li><img _src="https://img.alicdn.com/bao/uploaded/i1/TB1uf0kOpXXXXbHXVXXSutbFXXX.jpg_240x5000Q75s0.jpg_.webp"/></li> <li><img _src="https://img.alicdn.com/bao/uploaded/i1/TB1oJpqOpXXXXa8XVXXSutbFXXX.jpg_240x5000Q75s0.jpg_.webp"/></li> <li><img _src="https://img.alicdn.com/bao/uploaded/i1/TB1ombGMVXXXXXQXFXXSutbFXXX.jpg_240x5000Q75s0.jpg_.webp"/></li> <li><img _src="https://img.alicdn.com/bao/uploaded/i1/TB1vmzRMVXXXXcSXpXXSutbFXXX.jpg_240x5000Q75s0.jpg_.webp"/></li> <li><img _src="https://img.alicdn.com/bao/uploaded/i1/TB1UIhGOpXXXXcOXXXXSutbFXXX.jpg_240x5000Q75s0.jpg_.webp"/></li> <li><img _src="https://img.alicdn.com/bao/uploaded/i1/TB1s7DiMVXXXXcbaXXXSutbFXXX.jpg_240x5000Q75s0.jpg_.webp"/></li> <li><img _src="https://img.alicdn.com/bao/uploaded/i1/TB1wBlcOpXXXXXTapXXSutbFXXX.jpg_240x5000Q75s0.jpg_.webp"/></li> <li><img _src="https://img.alicdn.com/bao/uploaded/i1/TB1ULxzOpXXXXX.XVXXSutbFXXX.jpg_240x5000Q75s0.jpg_.webp"/></li> <li><img _src="https://img.alicdn.com/bao/uploaded/i1/TB1uf0kOpXXXXbHXVXXSutbFXXX.jpg_240x5000Q75s0.jpg_.webp"/></li> <li><img _src="https://img.alicdn.com/bao/uploaded/i1/TB1oJpqOpXXXXa8XVXXSutbFXXX.jpg_240x5000Q75s0.jpg_.webp"/></li> <li><img _src="https://img.alicdn.com/bao/uploaded/i1/TB1ombGMVXXXXXQXFXXSutbFXXX.jpg_240x5000Q75s0.jpg_.webp"/></li> <li><img _src="https://img.alicdn.com/bao/uploaded/i1/TB1vmzRMVXXXXcSXpXXSutbFXXX.jpg_240x5000Q75s0.jpg_.webp"/></li> <li><img _src="https://img.alicdn.com/bao/uploaded/i1/TB1UIhGOpXXXXcOXXXXSutbFXXX.jpg_240x5000Q75s0.jpg_.webp"/></li> <li><img _src="https://img.alicdn.com/bao/uploaded/i1/TB1s7DiMVXXXXcbaXXXSutbFXXX.jpg_240x5000Q75s0.jpg_.webp"/></li> </ul> </body> </html>
預載入：通過建立image物件
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="../css/public.css"/> <script type="text/javascript" src="../js/rainbow.js"></script> <script type="text/javascript"> window.onload=function(){ var oImg=document.getElementById("img"); var oImage=new Image(); var arr=[ '../img/hd1.jpg', '../img/hd2.jpg', '../img/hd3.jpg', '../img/hd4.jpg', '../img/hd5.jpg', '../img/hd6.jpg', '../img/hd7.jpg', '../img/hd8.jpg' ]; var iCur=0; var i=0; show(); function show(){ //通過src屬性將url資源載入完成並存放在本地快取中 oImage.src=arr[iCur]; oImage.onload=function(){ iCur++; // console.log(iCur); if(iCur<arr.length){ show(); } // document.title=iCur+'/'+arr.length; } } oImg.onclick=function(){ i++; oImg.src=arr[i%arr.length]; } } </sc