只要是好东西,都应该主动分享出来,让大家都用起来;鼓励开源,大家一起,为积累更多更好的东西而奋斗!

图片延迟加载(image-lazyload)

ImageLazyload.init([options])点击展开

一、接口功能

初始化并启动lazyload组件

二、参数说明

/**
 * 初始化并启动lazyload组件
 * @param       {Object}    options     初始化所需配置;参数可选
 * @p-config    {Integer}   offset      处于屏幕之外offset像素的图片依然加载,默认:60
 * @p-config    {jQ-Elm}    container   加载指定HTML节点内的图片,默认:document.body
 * @p-config    {function}  callback    每张图片加载完成后的回调,默认:null
 */
mark:options参数可选,并且其中每一项均为可选参数

三、示例

1、在HTML中,img标签需要这样写
                    
                    <img data-src="http://dummyimage.com/200x200/000/fff"
                         src="//www.baidufe.com/fe/widget/image-lazyload/img/default.png?v=99734084" alt="随机图片">
                
2、不设置options参数,全不采用默认
                    // 默认配置
                    ImageLoazyload.init();
                
3、设置options参数
                    // 其中options参数中每一项均为可选
                    ImageLazyload.init({
                        offset : 30,
                        container : $('.mod-test'),
                        callback : function($img) {
                            $img.addClass('x-loaded');
                        }
                    });
                

ImageLazyload.load($img)点击展开

一、接口功能

指定某图片节点,并强制加载

二、详细配置项

/**
 * 指定某图片节点,并强制加载
 * @param   {Object}    elm jQuery封装的<img/>节点对象(单个)
 */

三、配置项说明

1、强制加载某图片
                    // 加载图片
                    ImageLazyload.load($('#theImage'));
                

ImageLazyload.visible($img)点击展开

一、接口功能

判断当前img是否在屏显范围(可视区域)之内

二、详细配置项

/**
 * 判断当前img是否在屏显范围(可视区域)之内
 * @param   {Object}    elm jQuery封装的<img/>节点对象(单个)
 * @return  {Boolean}   图片可见返回true,否则返回false
 */

三、配置项说明

1、判断图片是否在可视区域内
                    // 判断图片是否可见
                    var isVisible = ImageLazyload.visible($('#theImage'));