電子商務網站中長網頁圖片延遲加載方法

電子商務網站中長網頁圖片延遲加載方法

 

在電子商務網站的製做過程當中，感覺到了其功能的強大和模板製做的靈活，如今總結一下本身在製做模板過程當中處理長網頁中大量圖片的延遲加載的方法，與你們分享。

在網站中有些場景是須要呈現大量圖片的、網頁也很長，在這種狀況下就要使用圖片延遲加載方法，不然就會由於圖片量大的緣由而出現網頁遲遲不能顯示，用戶體驗差，沒有耐心的用戶會關掉該網頁，下面針對這個場景介紹處理方法。

1、圖像延遲加載jquery插件介紹

Lazy Load 是一個用 JavaScript 編寫的 jQuery 插件。它能夠延遲加載長頁面中的圖片，在瀏覽器可視區域外的圖片不會被載入, 直到用戶將頁面滾動到它們所在的位置。在圖片量較大的長頁面中延遲加載圖片能夠加快頁面加載速度，瀏覽器將會在加載可見圖片以後即開始顯示網頁，減小用戶等待時間，用戶體驗很好。在幸福生活網（http://www.happy36524.com）及其子站正品旗艦店導航(http://qjd.happy36524.com)中就使用了該插件，效果很是好，感興趣的朋友能夠訪問體驗一下效果。

2、在模板製做中使用Lazy Load

1. Lazy Load 依賴於 jQuery. 請將下列代碼加入模板頁面 head 區域:

 <script src="jquery.js" type="text/javascript"></script>

 <script src="jquery.lazyload.js" type="text/javascript"></script>

其中jquery.js及jquery.lazyload.js都是開源軟件，均可以從其官方網站上下載最新版本，能夠百度一下就能找到。

 2.準備一個1x1像素的圖片文件

 製做只有一個像素的的圖片文件，只是一個點，我在製做的時候使用了1像素的黑點文件b.png,在Lazy Load官方網站上使用的是一個grey.gif文件，也是一個1x1像素的圖片文件，它用來做爲在瀏覽器沒有將其顯示以前的佔位符。

3.修改模板網頁中圖像標籤

怎麼改呢？在圖片的img的 src屬性中設置佔位符圖片,而且須要將真實圖片的URL設置到data-original屬性，這裏能夠定義特定的class以得到須要延遲加載的圖片對象，經過這種方法你能夠簡單地控制插件綁定。

<img class="lazy" src="img/b.png" data-original="img/example.jpg"  width="200" heigh="180">

4. 加入javascript代碼，使插件可以處理延遲加載的圖片

處理圖片的代碼以下.

$("img.lazy").lazyload();

這將使全部class爲lazy的圖片將被延遲加載。

3、使用效果

將模板修改完成後保存，生成首頁和欄目頁，瀏覽生成的網頁就會出現延遲加載圖片的效果，隨着滾動條的下拉，圖片逐步加載，頁面速度加載特別快，在大的電子商務網站中大都使用了該技術，若是有須要的朋友能夠試試，也能夠訪問我製做的網站看看效果。