jQuery.lazyload源码解析

以你之姓@ 2021-06-26 16:06 682阅读 0赞

`$.lazyload.js`的书写形式与大部分插件相似，结构也相似（略过）  
首先看`setting`，也就是默认配置：

var settings = { 
                threshold       : 0, 
                failure_limit   : 0,   
                event           : "scroll",
                effect          : "show",
                container       : window,
                data_attribute  : "original", 
                skip_invisible  : true, 
                appear          : null,
                load            : null,
                placeholder     : "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC"
            };

参数说明：

*  `threshold` => 提前开始加载的距离参数，默认`0` ;
 *  `failure_limit` =>如果找到的是第 `failure_limit`个`img`元素，且不在`container`视口上方，左方及视口内（可以允许在视口下方，右方），则中断循环.图片排序混乱时,`failurelimit`,值为数字.`lazyload`默认在找到第一张不在可见区域里的图片时则不再继续加载,但当`HTML`容器混乱的时候可能出现可见区域内图片并没加载出来的情况,`failurelimit`意在加载`N`张可见区域外的图片,以避免出现这个问题.默认`0`
 *  `event` => 触发事件，默认`scroll`
 *  `container` => 容器，默认`window`
 *  `effect` => 显示方法，默认为`show`，也可以设置为`fadeIn`，`API`中隐藏了一个配置属性`effectspeed`，动画运行的时间
 *  `data_attribute` =>`HTML`中`data`属性值，默认`data-original`
 *  `skip_invisible` => 是否忽略隐藏的元素，默认`true`
 *  `appear` => 在`img`触发`appear`事件时执行的回调
 *  `load` => 在`img`触发`load`事件时执行的回调
 *  `placeholder` => 图片占位符，`img`元素默认`src`属性为`1*1`像素的透明图片

if(options) { 
    
            //如果有failurelimit传入，将failurelimit赋值给options.failure_limit，并清除failurelimit变量
    
           if (undefined !== options.failurelimit) { 
                options.failure_limit = options.failurelimit;
                delete options.failurelimit;
            }
    
            //同上，这次传入的是动画速度
    
           if (undefined !== options.effectspeed) { 
               options.effect_speed = options.effectspeed;
               delete options.effectspeed;
           }
    
            //对setting进行扩展
    
           $.extend(settings, options);
     }

对容器进行初始化

$container = (settings.container === undefined ||settings.container === window) ? $window : $(settings.container);

为`container`绑定`scroll`事件

if (0 === settings.event.indexOf("scroll")) { 
          $container.bind(settings.event, function() { 
             return update();
          });
    }

判断`img`是不是在`container`视图范围内

$.belowthefold = function(element, settings) { };    // 在视口下方
    $.rightoffold = function(element, settings) { };        // 在视口右方
    $.abovethetop = function(element, settings) { };        // 在视口上方
    $.leftofbegin = function(element, settings) { };        // 在视口左方

`container`的更新事件

this.each(function() { 
                var self = this;
                var $self = $(self);
    
                self.loaded = false;
    
                //如果没有设定占位图的src，则默认为placeholder
                if ($self.attr("src") === undefined || $self.attr("src") === false) { 
                    $self.attr("src", settings.placeholder);
                }
    
                //附加绑定一个appear事件，等待trigger触发
                $self.one("appear", function() { 
                    if (!this.loaded) { 
    
                        //如果回调参数存在，则执行回调，并将本身的元素长度与setting作为参数继承给回调函数
                        if (settings.appear) { 
                            var elements_left = elements.length;
                            settings.appear.call(self, elements_left, settings);
                        }
                        $("<img />")
                            .bind("load", function() { 
                                var original = $self.data(settings.data_attribute);
                                $self.hide();
                                if ($self.is("img")) { 
                                    $self.attr("src", original);
                                } else { 
                                    $self.css("background-image", "url('" + original + "')");
                                }
                                //$(this)['show'](400)表示这个事件的调用时间
                                $self[settings.effect](settings.effect_speed);
    
                                self.loaded = true;
                                //过滤加载完成的图片
                                var temp = $.grep(elements, function(element) { 
                                    return !element.loaded;
                                });
                                elements = $(temp);
                                //执行load回调
                                if (settings.load) { 
                                    var elements_left = elements.length;
                                    settings.load.call(self, elements_left, settings);
                                }
                            })
                            .attr("src", $self.data(settings.data_attribute));
                    }
                });

绑定不是`scroll`的事件，用于触发`appear`事件

if (0 !== settings.event.indexOf("scroll")) { 
           $self.bind(settings.event, function() { 
               if (!self.loaded) { 
                   $self.trigger("appear");
               }
           });
       }
    });

使用浏览器返回按钮，利用往返缓存转换页面时，在`window`上绑定`pageshow`事件

if ((/iphone|ipod|ipad.*os 5/gi).test(navigator.appVersion)) { 
         $window.bind("pageshow", function(event) { 
             if (event.originalEvent && event.originalEvent.persisted) { 
                 elements.each(function() { 
                     $(this).trigger("appear");
                 });
             }
         });
     }

使用`$.extend`对选择器进行扩展,也是对选择器的自定义，这样就可以使用`$("img:below-the-fold")`或者`$("img").filter(":below-the-fold")`进行特定元素的属性扩展  
例如：`$("img:below-the-fold").css('width','500px');`  
出现效果：视图下的元素，宽被设定为`500px`

$.extend($.expr[":"], { 
        "below-the-fold" : function(a) {  return $.belowthefold(a, { threshold : 0}); },
        "above-the-top"  : function(a) {  return !$.belowthefold(a, { threshold : 0}); },
        "right-of-screen": function(a) {  return $.rightoffold(a, { threshold : 0}); },
        "left-of-screen" : function(a) {  return !$.rightoffold(a, { threshold : 0}); },
        "in-viewport"    : function(a) {  return $.inviewport(a, { threshold : 0}); },
        "above-the-fold" : function(a) {  return !$.belowthefold(a, { threshold : 0}); },
        "right-of-fold"  : function(a) {  return $.rightoffold(a, { threshold : 0}); },
        "left-of-fold"   : function(a) {  return !$.rightoffold(a, { threshold : 0}); }
    });