lazyloadImage.js
1.49 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
/**
* @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);
};