(function($) {
 $.fn.scrollLoading = function(options) {
 var defaults = {
  // 在html標(biāo)簽中存放的屬性名稱；
  attr: "data-url",
  // 父元素默認(rèn)為window
  container: window,
  callback: $.noop
 };
 // 不管有沒有傳入?yún)?shù)，先合并再說；
 var params = $.extend({}, defaults, options || {});
 // 把父元素轉(zhuǎn)為jquery對象；
 var container = $(params.container);
 // 新建一個(gè)數(shù)組，然后調(diào)用each方法，用于存儲(chǔ)每個(gè)dom對象相關(guān)的數(shù)據(jù)；
 params.cache = [];
 $(this).each(function() {
  // 取出jquery對象中每個(gè)dom對象的節(jié)點(diǎn)類型，取出每個(gè)dom對象上設(shè)置的圖片路徑
  var node = this.nodeName.toLowerCase(), url = $(this).attr(params["attr"]);
  //重組，把每個(gè)dom對象上的屬性存為一個(gè)對象；
  var data = {
  obj: $(this),
  tag: node,
  url: url
  };
  // 把這個(gè)對象加到一個(gè)數(shù)組中；
  params.cache.push(data);
 });

 var callback = function(call) {
  if ($.isFunction(params.callback)) {
  params.callback.call(call);
  }
 };
 
 //每次觸發(fā)滾動(dòng)事件時(shí)，對每個(gè)dom元素與container元素進(jìn)行位置判斷，如果滿足條件，就把路徑賦予這個(gè)dom元素！
 var loading = function() {
  // 獲取父元素的高度
  var contHeight = container.outerHeight();
  var contWidth = container.outerWidth();

  // 獲取父元素相對于文檔頁頂部的距離，這邊要注意了，分為以下兩種情況；
  if (container.get(0) === window) {
  // 第一種情況父元素為window，獲取瀏覽器滾動(dòng)條已滾動(dòng)的距離；$(window)沒有offset()方法；
  var contop = $(window).scrollTop();
  var conleft = $(window).scrollLeft();
  } else {
  // 第二種情況父元素為非window元素，獲取它的滾動(dòng)條滾動(dòng)的距離；
  var contop = container.offset().top;
  var conleft = container.offset().left;
  }

  $.each(params.cache, function(i, data) {
  var o = data.obj, tag = data.tag, url = data.url, post, posb, posl, posr;
  if (o) {
   //對象頂部與文檔頂部之間的距離，如果它小于父元素底部與文檔頂部的距離，則說明垂直方向上已經(jīng)進(jìn)入可視區(qū)域了；
   post = o.offset().top - (contop + contHeight);
   //對象底部與文檔頂部之間的距離，如果它大于父元素頂部與文檔頂部的距離，則說明垂直方向上已經(jīng)進(jìn)入可視區(qū)域了；
   posb = o.offset().top + o.height() - contop;

   // 水平方向上同理；
   posl = o.offset().left - (conleft + contWidth);
   posr = o.offset().left + o.width() - conleft;

   // 只有當(dāng)這個(gè)對象是可視的，并且這四個(gè)條件都滿足時(shí)，才能給這個(gè)對象賦予圖片路徑；
   if ( o.is(':visible') && (post < 0 && posb > 0) && (posl < 0 && posr > 0) ) {
   if (url) {
    //在瀏覽器窗口內(nèi)
    if (tag === "img") {
    //設(shè)置圖片src
    callback(o.attr("src", url));
    } else {
    // 設(shè)置除img之外元素的背景url
    callback(o.css("background-image", "url("+ url +")"));
    }
   } else {
    // 無地址，直接觸發(fā)回調(diào)
    callback(o);
   }
   // 給對象設(shè)置完圖片路徑之后，把params.cache中的對象給清除掉；對象再進(jìn)入可視區(qū)，就不再進(jìn)行重復(fù)設(shè)置了；
   data.obj = null;
   }
  }
  });
 };
 //加載完畢即執(zhí)行
 loading();
 //滾動(dòng)執(zhí)行
 container.bind("scroll", loading);
 };
})(jQuery);