图片延迟加载插件

这个插件是非常有用的，它提高了性能延迟长网页图像加载因为外面的视口图像（网页可见部分）不会被加载到用户滚动到他们。
默认情况下，只有窗口滚动到他们的位置才显示图片。如果你想要你想让图片早一点显示，例如想让距离屏幕200像素我们可以调用一下方法
$("img").unveil(200);
你还可以直接触发unveil事件，让图片立即显示
$("img").trigger("unveil");

源码如下：

;(function($) {

  $.fn.unveil = function(threshold) {

    var $w = $(window),
        th = threshold || 0,
        retina = window.devicePixelRatio > 1,
        attrib = retina? "data-src-retina" : "data-src",
        images = this,
        loaded,
        inview,
        source;
	//one方法只执行一次
    this.one("unveil", function() {
      source = this.getAttribute(attrib);
      source = source || this.getAttribute("data-src");
      if (source) this.setAttribute("src", source);
    });

    function unveil() {
	  //filter方法筛选出与指定函数返回值匹配的元素集合
      inview = images.filter(function() {
        var $e = $(this),
            wt = $w.scrollTop(),
            wb = wt + $w.height(),
            et = $e.offset().top,
            eb = et + $e.height();

        return eb >= wt - th && et <= wb + th;
      });

      loaded = inview.trigger("unveil");
	  //not方法从匹配的元素集合中移除指定的元素
	  images = images.not(loaded);
    }

    $w.scroll(unveil);
    $w.resize(unveil);

    unveil();

    return this;

  };

})(jQuery);

 

基本思路为：

1.对选择的图片用one事件绑定方法绑定unveil事件。

2.当窗口滚动scroll和调整大小resise的时候调用unveil方法

3.unveil方法是内部的核心方法，此放过通过filter方法来过滤所有的图片把满足条件的图片筛选出来，完了触发unveil事件，让图片加载真正的图片。成功以后通过not方法从已经选择的图片中删除此图片。

unveil方法过滤条件算法是如果当前滚动条的高度已经到了图片指定的距离顶端的高度时就显示图片