jquery.lazyload.js

基于jQuery的惰性加载插件。在页面滚动到图片左右(具体位置可以配置)时图片进行加载。

1、使用方法:
对需要进行惰性加载的图片,class添加’lazy’.调用方法为$(‘img.lazy’).lazyload();
函数中可以传入参数。参数解释如下:

下面进行源码解析。
2、结构

$.fn.lazyload = function (options) {};//对外所用的方法
$.belowthefold = function (element, settings) {};
$.rightoffold = function (element, settings) {};
$.abovethetop = function (element, settings) {};
$.leftofbegin = function (element, settings) {};
$.inviewport = function (element, settings) {};
$.extend($.expr[':'], {};

结构清晰地对jQuery进行了扩展。$(‘img.lazy’).lazyload()触发了此js.下面对各扩展进行详细分析。
2.1、$.fn.lazyload
被触发,进行如下操作:
a)初始化settings;
b)定义update方法,执行各项检查:
①是否隐藏或不可见,是则跳出此操作。
②父容器是否在设置的可见范围之内
③如果检查通过,则触发显示
c)如果设置了scroll,则对父容器绑定scroll事件,执行update操作
d)图片绑定appear事件,此事件之内触发一次。在appear事件绑定时,同时绑定了图片load事件。图片加载前后的事件均在此配置。
e)如果第一个事件不是scroll,则在此对象上绑定设置的事件。
f)绑定窗口缩放事件,回调函数是update

3、API解释
3.1、$.abovethetop

 $.abovethetop = function (element, settings) {
        var fold;
        if (settings.container === undefined || settings.container === window) {
            fold = $window.scrollTop();//当前文档的滚动条的垂直位置
        } else {
            fold = $(settings.container).offset().top;//父元素相对于当前文档的垂直偏移
        }
        return fold >= $(element).offset().top + settings.threshold + $(element).height();//父元素是否在滚动条垂直偏移之外。
    };

3.2、$.leftofbegin

     $.leftofbegin = function (element, settings) {
        var fold;
        if (settings.container === undefined || settings.container === window) {
            fold = $window.scrollLeft();//滚动条的水平偏移
        } else {
            fold = $(settings.container).offset().left;//父容器的水平偏移
        }
        return fold >= $(element).offset().left + settings.threshold + $(element).width();//父元素是否在滚动条水平偏移之外。
    };
此条目发表在PHP, 数据库, 浏览器分类目录。将固定链接加入收藏夹。

1 则回应给 jquery.lazyload.js

发表评论

电子邮件地址不会被公开。 必填项已用*标注