滾動加載圖片（懶加載）實現原理

//擴展爲jquery插件;使用方法：$("selector").scrollLoad({ 參數在代碼中有說明 })http://www.tuicool.com/articles/rUjIZzb
 1 (function($) {  2  $.fn.scrollLoading = function(options) {  3  var defaults = {  4  // 在html標籤中存放的屬性名稱；  5  attr: "data-url",  6  // 父元素默認爲window  7  container: window,  8  callback: $.noop  9  }; 10  // 無論有沒有傳入參數，先合併再說； 11  var params = $.extend({}, defaults, options || {}); 12  // 把父元素轉爲jquery對象； 13  var container = $(params.container); 14  // 新建一個數組，而後調用each方法，用於存儲每一個dom對象相關的數據； 15  params.cache = []; 16  $(this).each(function() { 17  // 取出jquery對象中每一個dom對象的節點類型，取出每一個dom對象上設置的圖片路徑 18  var node = this.nodeName.toLowerCase(), url = $(this).attr(params["attr"]); 19  //重組，把每一個dom對象上的屬性存爲一個對象； 20  var data = { 21  obj: $(this), 22  tag: node, 23  url: url 24  }; 25  // 把這個對象加到一個數組中； 26  params.cache.push(data); 27  }); 28 
29  var callback = function(call) { 30  if ($.isFunction(params.callback)) { 31  params.callback.call(call); 32  } 33  }; 34         
35  //每次觸發滾動事件時，對每一個dom元素與container元素進行位置判斷，若是知足條件，就把路徑賦予這個dom元素！ 36  var loading = function() { 37  // 獲取父元素的高度 38  var contHeight = container.outerHeight(); 39  var contWidth = container.outerWidth(); 40 
41  // 獲取父元素相對於文檔頁頂部的距離，這邊要注意了，分爲如下兩種狀況； 42  if (container.get(0) === window) { 43  // 第一種狀況父元素爲window，獲取瀏覽器滾動條已滾動的距離；$(window)沒有offset()方法； 44  var contop = $(window).scrollTop(); 45  var conleft = $(window).scrollLeft(); 46  } else { 47  // 第二種狀況父元素爲非window元素，獲取它的滾動條滾動的距離； 48  var contop = container.offset().top; 49  var conleft = container.offset().left; 50  } 51 
52  $.each(params.cache, function(i, data) { 53  var o = data.obj, tag = data.tag, url = data.url, post, posb, posl, posr; 54  if (o) { 55  //對象頂部與文檔頂部之間的距離，若是它小於父元素底部與文檔頂部的距離，則說明垂直方向上已經進入可視區域了； 56  post = o.offset().top - (contop + contHeight); 57  //對象底部與文檔頂部之間的距離，若是它大於父元素頂部與文檔頂部的距離，則說明垂直方向上已經進入可視區域了； 58  posb = o.offset().top + o.height() - contop; 59 
60  // 水平方向上同理； 61  posl = o.offset().left - (conleft + contWidth); 62  posr = o.offset().left + o.width() - conleft; 63 
64  // 只有當這個對象是可視的，而且這四個條件都知足時，才能給這個對象賦予圖片路徑； 65                     if ( o.is(':visible') && (post < 0 && posb > 0) && (posl < 0 && posr > 0) ) { 66  if (url) { 67  //在瀏覽器窗口內 68  if (tag === "img") { 69  //設置圖片src 70  callback(o.attr("src", url)); 71  } else { 72  // 設置除img以外元素的背景url 73  callback(o.css("background-image", "url("+ url +")")); 74  } 75  } else { 76  // 無地址，直接觸發回調 77  callback(o); 78  } 79  // 給對象設置完圖片路徑以後，把params.cache中的對象給清除掉；對象再進入可視區，就再也不進行重複設置了； 80  data.obj = null; 81  } 82  } 83  }); 84  }; 85  //加載完畢即執行 86  loading(); 87  //滾動執行 88  container.bind("scroll", loading); 89  }; 90 })(jQuery);