lazyloadImage.js 1.49 KB
/**
 * @fileOverview 图片懒加载的组件
 * @author fei.hong@yoho.cn
 * @date 2014-05-14
 */
//require("lib/util/jquery.scrollev");
require("lazyload");

var $ = require("jquery");
var settings = 
{
    threshold       : 0, // 灵敏度. 提前加载, 值为像素值
    failure_limit   : 0, // 容差范围. 检查是否在显示区域内,默认找到第 1 张不可见的图片时,就终止遍历
    event           : "scroll", // 自定义触发事件 默认为 scroll. 如scrollstop
    effect          : "fadeIn", // 自定义显示效果, 默认为show. 如show, fadeIn, slideDown
    container       : window, // 图片插入到的容器,默认为window
    data_attribute  : "original", // 真实图片地址的 data 属性后缀
    skip_invisible  : true, // 加载不可见图像, 默认true是不会加载隐藏的不可见图像
    appear          : null, // 图片加载时的事件 (Function)
    load            : null, // 图片加载后的事件 (Function)
    placeholder     : "data:image/gif;base64,R0lGODlhAQABAJEAAAAAAP///93d3f///yH5BAEAAAMALAAAAAABAAEAAAICVAEAOw=="
};

/**
 * 初始化页面的图片
 * 
 * 实现懒加载需要修改的HTML代码:
 * 需要在页面的img图片标签加上"data-original"属性, 值为需要懒加载的图片地址
 * 
 * @param string className class样式名称
 * @param object options 配置项
 * @return void
 */
exports.init = function(className, options)
{
    $.extend(settings, options || {});
    $('img.'+className).lazyload(options);
};