javascript - unveil懒加载插件源码问题

问题描述

问 题

;(function($) {

  $.fn.unveil = function(threshold, callback) {

    var $w = $(window),
        th = threshold || 0,
        retina = window.devicePixelRatio > 1,
        attrib = retina? "data-src-retina" : "data-src",
        images = this,
        loaded;

    this.one("unveil", function() {
      var source = this.getAttribute(attrib);
      source = source || this.getAttribute("data-src");
      if (source) {
        this.setAttribute("src", source);
        if (typeof callback === "function") callback.call(this);
      }
    });

    function unveil() {
      var inview = images.filter(function() {
        var $e = $(this);
        if ($e.is(":hidden")) return;

        var 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");
      images = images.not(loaded);
    }

    //此行懵圈中
    $w.on("scroll.unveil resize.unveil lookup.unveil", unveil);

    unveil();

    return this;

  };

})(window.jQuery || window.Zepto);

中的scroll.unveil resize.unveil lookup.unveil是什么事件？看的一头雾水

解决方案

scroll，resize，lookup后面的.unveil就是传说中jquery里事件的命名空间，看这里namespace，功能上就是普通的scroll，resize，lookup事件监听，后面加了命名空间的作用就是

一是，方便插件内统一管理事件，可以看文档

二是，防止其他地方误注销该监听吧(我猜的)

这篇关于javascript - unveil懒加载插件源码问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！