網頁前端開發，對於圖片慢加載簡介

http://www.cnblogs.com/qingseyuandi/p/loadingLater.html

 

 網頁前端的圖片慢加載給網頁顯示的成本下降了很多，所以我在這邊簡單的介紹一下慢加載的一個技術原理，但願能起到拋磚引玉的做用，寫的很差的地方但願指正，謝謝~~

 

  技術背景

      如今的網頁系統，對於一些對圖片資源比較多，而且一次性沒法瀏覽完整個網頁的狀況下，圖片慢加載能夠提升客戶端的體驗，如IT大頭：淘寶，網易，新浪等等。。。

 

  技術原理

　   技術說穿了其實也就那麼回事，懂了就簡單了，呵呵~

     1.   預設圖片的屬性，「src"指向一個固定小圖（未加載圖片），"_src"指向真實的圖片地址；

     2.   獲取瀏覽器滾動事件；

     3.   計算當前瀏覽器下拉的位置，經過高度判斷是否須要加載圖片；

     4.   對須要替換的圖片，設定真實的src值爲（原_src值）

  

   技術實現

     這邊我寫了一個DEMO，會在網頁的最後給出下載連接 ^__^

那如今我描述一下這個DEMO的實現，本DEMO不包含設計問題，只提供技術思路。

 

   首先我建了一個空的網站系統，添加了對應的文件資源，如圖所示：

 

   content/images目錄存儲2個圖片，分別爲：NOPIC.PNG/未加載小圖 ，TEST.PNG/須要加載的圖片

   根目錄2個JS文件，分別是：jquery-1.8.0.min.js（jquery文件），index.js（實現腳本）

   根目錄Default.aspx，目標測試頁面，如下爲HTML的收縮截圖，紅色框爲展現圖片區，須要慢加載的圖片：

 

  如下爲index.js的核心片斷代碼：

 1 //高度計算函數
 2 TestWeb.LayoutScroll = function (config) {
 3 
 4     var me = this;
 5     var defaults = {
 6         //參數
 7         box: null,
 8         isGoo: false,
 9         //初始化
10         init: function () {
11             //是否爲ie，並讀出ie版本
12             me.isIE = !!navigator.userAgent.match(/MSIE\b\s*([0-9]\.[0-9]);/img);
13             me.isIE && (me.isIE = RegExp.$1);
14             me.isGoo = !!navigator.userAgent.match(/AppleWebKit\b/img);
15             me.box = me.isIE ? document.documentElement : document;
16             me.bind();
17         },
18 
19         bind: function () {
20             me.box.onscroll = function () {
21                 //讀取滾動條的位置和瀏覽器窗口的顯示大小
22                 var top = me.isGoo ? document.body.scrollTop : document.documentElement.scrollTop,
23                     left = me.isGoo ? document.body.scrollLeft : document.documentElement.scrollLeft,
24                     width = document.documentElement.clientWidth,
25                     height = document.documentElement.clientHeight;
26            
27                 var lookHeight = top + height;
28 
29 
30                
31 
32                 var headerH = 120;
33                 var textH = 300;
34                 var imageH = 300;
35 
36 
37                 //計算出高度進行src替換
38                 if (lookHeight > (headerH + textH + imageH + 600)) {
39 
40 
41                     $("#ImageList2 img").each(function () {
42                         var src = $(this).attr("_src");
43 
44                         $(this).attr("src", src);
45                     });
46 
47                 }
48 
49                 //計算出高度進行src替換
50                 if (lookHeight > (headerH + (textH + imageH) * 2) + 600) {
51                     $("#ImageList3 img").each(function () {
52                         var src = $(this).attr("_src");
53 
54                         $(this).attr("src", src);
55                     });
56                 }
57 
58                 //計算出高度進行src替換
59                 if (lookHeight > (headerH + (textH + imageH) * 3) + 600) {
60                     $("#ImageList4 img").each(function () {
61                         var src = $(this).attr("_src");
62 
63                         $(this).attr("src", src);
64                     });
65                 }
66             }
67         }
68     };
69 
70     TestWeb.apply(me, config, defaults);
71     me.init();  //init
72 
73 }

 

  DEMO下載

  本人用谷歌瀏覽器 24.0.1312.五、IE8測試經過，有興趣的朋友能夠下載DEMO，用開發人員工具跟蹤下腳本的執行。

  下載地址：點擊我下載