懶加載和預加載

時間 2019-11-16

標籤加載简体版

原文原文鏈接

1、懶加載 1.什麼是懶加載懶加載也叫延遲加載，指的是在長網頁中延遲加載圖像，是一種很好優化網頁性能的方式。用戶滾動到它們以前，可視區域外的圖像不會加載。這與圖像預加載相反，在長網頁上使用延遲加載將使網頁加載更快。在某些狀況下，它還能夠幫助減小服務器負載。常適用圖片不少，頁面很長的電商網站場景中。
2.爲何要用懶加載能提高用戶的體驗，不妨設想下，用戶打開像手機淘寶長頁面的時候，若是頁面上全部的圖片都須要加載，因爲圖片數目較大，等待時間很長，用戶不免會心生抱怨，這就嚴重影響用戶體驗。
減小無效資源的加載，這樣能明顯減小了服務器的壓力和流量，也可以減少瀏覽器的負擔。
防止併發加載的資源過多會阻塞js的加載，影響網站的正常使用。
3.懶加載的原理首先將頁面上的圖片的 src 屬性設爲空字符串，而圖片的真實路徑則設置在data-original屬性中，當頁面滾動的時候須要去監聽scroll事件，在scroll事件的回調中，判斷咱們的懶加載的圖片是否進入可視區域,若是圖片在可視區內將圖片的 src 屬性設置爲data-original 的值，這樣就能夠實現延遲加載。
4.懶加載實現步驟php

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Lazyload</title>
    <style>
      .image-item {
        display: block;
        margin-bottom: 50px;
        height: 200px;//必定記得設置圖片高度
    }
    </style>
</head>
<body>
<img src="" class="image-item" lazyload="true"  data-original="images/1.png"/>
<img src="" class="image-item" lazyload="true"  data-original="images/2.png"/>
<img src="" class="image-item" lazyload="true"  data-original="images/3.png"/>
<img src="" class="image-item" lazyload="true"  data-original="images/4.png"/>
<img src="" class="image-item" lazyload="true"  data-original="images/5.png"/>
<img src="" class="image-item" lazyload="true"  data-original="images/6.png"/>
<img src="" class="image-item" lazyload="true"  data-original="images/7.png"/>
<img src="" class="image-item" lazyload="true"  data-original="images/8.png"/>
<img src="" class="image-item" lazyload="true"  data-original="images/9.png"/>
<img src="" class="image-item" lazyload="true"  data-original="images/10.png"/>
<img src="" class="image-item" lazyload="true"  data-original="images/11.png"/>
<img src="" class="image-item" lazyload="true"  data-original="images/12.png"/>
<script>
var viewHeight =document.documentElement.clientHeight//獲取可視區高度
function lazyload(){
var eles=document.querySelectorAll（'img[data-original][lazyload]'）
Array.prototype.forEach.call(eles,function(item,index){
var rect
if(item.dataset.original==="")
   return
rect=item.getBoundingClientRect()// 用於得到頁面中某個元素的左，上，右和下分別相對瀏覽器視窗的位置
if(rect.bottom>=0 && rect.top < viewHeight){
!function(){
  var img=new Image()
  img.src=item.dataset.original
  img.onload=function(){
    item.src=img.src
    }
item.removeAttribute（"data-original"）//移除屬性，下次再也不遍歷
item.removeAttribute（"lazyload"）
   }()
  }
 })
}
lazyload()//剛開始還沒滾動屏幕時，要先觸發一次函數，初始化首頁的頁面圖片
document.addEventListener（"scroll"，lazyload)
</script>
</body>
</html>

2、預加載 1.什麼是預加載資源預加載是另外一個性能優化技術，咱們可使用該技術來預先告知瀏覽器某些資源可能在未來會被使用到。預加載簡單來講就是將全部所需的資源提早請求加載到本地，這樣後面在須要用到時就直接從緩存取資源。
2.爲何要用預加載在網頁所有加載以前，對一些主要內容進行加載，以提供給用戶更好的體驗，減小等待的時間。不然，若是一個頁面的內容過於龐大，沒有使用預加載技術的頁面就會長時間的展示爲一片空白，直到全部內容加載完畢。
3.實現預加載的幾種辦法使用HTML標籤html

<img src="http://pic26.nipic.com/20121213/6168183 0044449030002.jpg" style="display:none"/>

使用Image對象前端

<script src="./myPreload.js"></script>

//myPreload.js文件
var image= new Image()
image.src="http://pic26.nipic.com/20121213/6168183 004444903000 2.jpg"

使用XMLHttpRequest對象,雖然存在跨域問題，但會精細控制預加載過程跨域

var xmlhttprequest=new XMLHttpRequest();
xmlhttprequest.onreadystatechange=callback;
xmlhttprequest.onprogress=progressCallback;
xmlhttprequest.open("GET","http://image.baidu.com/mouse,jpg",true);
xmlhttprequest.send();
function callback(){
  if(xmlhttprequest.readyState==4&& xmlhttprequest.status==200){
    var responseText=xmlhttprequest.responseText;
  }else{
     console.log("Request was unsuccessful:"+xmlhttprequest.status);
  }
}
function progressCallback(e){
e=e || event;
if(e.lengthComputable){
console.log("Received"+e.loaded+"of"+e.total+"bytes")
}
}

使用PreloadJS庫
PreloadJS提供了一種預加載內容的一致方式，以便在HTML應用程序中使用。預加載可使用HTML標籤以及XHR來完成。默認狀況下，PreloadJS會嘗試使用XHR加載內容，由於它提供了對進度和完成事件的更好支持，可是因爲跨域問題，使用基於標記的加載可能更好。瀏覽器

//使用preload.js
var queue=new createjs.LoadQueue();//默認是xhr對象，若是是new createjs.LoadQueue(false)是指使用HTML標籤，能夠跨域
queue.on("complete",handleComplete,this);
queue.loadManifest([
{id:"myImage",src:"http://pic26.nipic.com/20121213/6168183  0044449030002.jpg"},
{id："myImage2"，src:"http://pic9.nipic.com/20100814/2839526  1931471581702.jpg"}
]);
function handleComplete(){
  var image=queue.getResuLt("myImage");
  document.body.appendChild(image);
}

3、懶加載和預加載的對比二者都是提升頁面性能有效的辦法，二者主要區別是一個是提早加載，一個是遲緩甚至不加載。懶加載對服務器前端有必定的緩解壓力做用，預加載則會增長服務器前端壓力。
若是想了解更多頁面性能優化的辦法，請猛戳頁面性能優化辦法有哪些
4、參考文章詳解懶加載和預加載(js)
懶加載和預加載
轉載於猿2048:➥《懶加載和預加載》緩存

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。