細說圖片懶加載以及預先加載

 這篇文章講述了圖片懶加載以及預加載，大家對圖片懶加載以及預加載不了解的話或者對細說圖片懶加載以及預加載感興趣的話那麼我們就一起來看看這篇文章吧， 好了廢話少說進入正題吧！

1.懶載入

#認識新的東西，那就從what、why開始。即想要了解圖片懶載入技術，那麼先了解什麼是懶加載？為什麼需要用到懶加載？

1.1什麼是懶加載?

#懶載入又稱延遲載入。當造訪一個頁面的時候，需要先把img元素或其他元素的背景圖先用一張預設的圖片來取代（佔位圖），這樣子

瀏覽器渲染頁面的時候就只需請求一次。當圖片出現在瀏覽器視覺區域的時候，才設定圖片的真實路徑，把圖片顯示出來。

1.2為什麼要使用圖片懶載入？

當頁面中圖片的數量多到一定數量的時候，而且圖片大小比較大，例如各種商場網站，圖片素材網等等。如果在頁面一載入的時候就

載入全部圖片，顯然會影響網站載入速度和加大伺服器負擔，而且使用者體驗也必然不好，那麼這時候可以採用懶載入.

1.3 懶加載具體實作原理

#頁面中的img元素之所以會發送http請求的原因是設定了src屬性，否則瀏覽器就不會發送請求去下載這個圖片。首先在頁面中把所有

的圖片用一張佔位圖進行佔位，並且在元素下設定src自訂屬性，存放圖片的真實路徑，當需要用到的時候取出該真實路徑動

態加給src。

2.預先載入

2.1.什麼是預先載入？

預先載入就是事先載入圖片，當使用者需要查看時可直接從本機快取渲染。

2.2 為什麼要使用預先載入？

當頁面中圖片比較大的時候，頁面載入的時候會出現該區域空白的效果或是看到圖片正在慢慢地載入出來，為了提高使用者體驗，需

要把這些圖片提前載入到快取中，當使用者一開啟頁面的時候，這些圖片就會快速的呈現出來，獲得更好的使用者體驗效果。

2.3實作方式有哪些？

方法1：使用css和JavaScript實作預先載入

方法2：只使用JavaScript實作預先載入

方法3：使用ajax實作預先載入

3.懶載入和預先載入的差異以及具體實現方式

兩種技術的行為是相反的，一個是提前加載，一個是延遲加載或不加載。懶載入對伺服器來說是有好的，可以緩解一定的壓力

力。而預載則相反，會增加伺服器的負擔。

懶載入具體實作方式：

#1.第一種是純粹的延遲加載，使用setTimeOut或setInterval進行加載延遲.

#2.第二種是條件加載，符合某些條件，或觸發了某些事件才開始非同步下載。

3.第三種是可視區加載，即​​僅加載用戶可以看到的區域，這個主要由監控滾動條來實現，一般會在距用戶看到某圖片前一定距離遍

開始加載，這樣能保證用戶拉下時正好能看到圖片。

預先載入具體實作方式：

實作預載的方法非常多，例如：用CSS和JavaScript實作預先載入；僅使用JavaScript實作預先載入；使用Ajax實作預先載入。

常用的是new Image();設定其src來實作預載，再使用onload方法回呼預載完成事件。只要瀏覽器把圖片下載到本地，同樣的src就會

使用緩存，這是最基本也是最實用的預載方法。當Image下載完圖片頭後，會得到寬和高，因此可以在預載前得到圖片的大小(方法

是用記時器輪循寬高變化。

以上就是本篇文章的所有內容，大家要是還不太了解的話，可以自己多實現兩邊就很容易掌握了哦！ ##相關推薦：

jquery的懶載入

的原理及實作

##JS 預先載入

影片音訊/影片擷取截圖技巧分享

以上是細說圖片懶加載以及預先加載的詳細內容。更多資訊請關注PHP中文網其他相關文章！