jquery实现图片按需延迟加载原理

var fn = function(){
$("#id img").each(function() {//遍历所有图片
var othis = $(this),//当前图片对象
top = othis.offset().top - $(window).scrollTop();//计算图片top - 滚动条top
if (top > $(window).height()) {//如果该图片不可见
return;//不管
} else {
othis.attr('src', othis.attr('data-src')).removeAttr('data-src');//可见的时候把占位值替换 并删除占位属性
}
});
}
fn();
$window.scroll(fn).resize(fn);//绑定事件

img.load{background:url('/images/loading.gif') no-repeat center center;}/*没有加载时loading的效果*/

if ($(window).scrollTop() + $(window).height() >= ($(this).offset().top) && ($(this).offset().top + $(this).height() >= $(window).scrollTop()) { //高级可见
}

//css
img.load{background:url('/iamges/loading.gif') no-repeat center center;}/*没有加载时loading的效果*/

/**
* @name 图片懒加载插件
* @description jQuery扩展插件,可制作滚动加载,点击加载等,依赖msc,jQuery,msc.event,目前只对window上操作
* @version 1.0
* @author xieliang
* @demo
* 1, 延迟加载
* $("#id img.imgLoad").imgLoad();//默认真实图片路径在 data-src 里, 默认为淡入
* 2, 修改真实图片路径
* $("img.imgLoad").imgLoad({attr:"data-img-src"});
* 3, 修改淡入效果
* $("img").imgLoad({effect:"show"});//没有淡入效果
* 4, 自定义事件
* $("img").imgLoad({event:"xieliang"});//定义事件名
* 在需要的地方 $("img").trigger("xieliang");//触发加载
* 5, 设置屏幕偏移, 支持 正，负
* $("img").imgLoad({threshold:-100});
*/
;(function(a) {
"use strict";
a.fn.imgLoad = function(config) {
var self = this;
if (!self.length || self[0].nodeName.toLowerCase() !== "img") {//如果选择器没有 或者 不是图片则返回自己www.111com.net
return self;
};
var conf = a.extend({}, a.fn.imgLoad.defaults, config || {});//合并
var cache = {};//存放图片对象
var imgLength = self.length;//总图片个数
var imgI = 0;//已加载的图片个数
if ("scroll" === conf.event) {//如果是滚动事件
var scroll = new msc.event("scroll", 0);//创建0延迟的滚动
scroll.add("imgLoad", function(obj) {
for (var item in cache) {//运行图片对象缓存
// if (obj.scrollTop + obj.height >= (cache[item].offset().top + conf.threshold)) {//如果该图片可见
if (obj.scrollTop + obj.height >= (cache[item].offset().top + conf.threshold) && (cache[item].offset().top+cache[item].height() >= obj.scrollTop)) {//高级可见
cache[item].trigger("imgLoad");//触发当前图片的加载事件
};
};
if (imgI >= imgLength) {//如果已加载大于等于总数
imgLength = imgI = cache = null;//清
msc.event.resize.remove("imgLoad");//移除resize事件
return false;//返回false移除scroll事件
};
});
msc.event.resize.add("imgLoad", function() { //设置resize时触发事件
scroll.trigger("imgLoad");
});
setTimeout(function() {
scroll.trigger("imgLoad"); //默认加载触发下,解决可能滚动条加载完成时不在顶部而不加载图片
}, 50);
};
return self.each(function(i) {//遍历所有图片
var $img = $(this);
cache[i] = $img;//把图片填进缓存
$img.one("imgLoad",//绑定一次性事件
function() {
if(!this['_imgLoad']){//为了配合tab组件可防止重复加载
this['_imgLoad'] = 1;
$("").bind("load",//创建个img来预加载
function() {
$img.hide().attr("src", $img.attr(conf.attr))[conf.effect]().removeAttr(conf.attr);//显示该图片
}).attr("src", $img.attr(conf.attr));
}
delete cache[i];//删除缓存里的
imgI++;//让已加载数自增下
});
if ("scroll" !== conf.event) {//如果不是滚动事件
$img.one(conf.event,//绑定一次性事件触发
function() {
if (cache[i]) {//如果缓存存在则视为没有加载
cache[i].trigger("imgLoad");//触发加载
};
});
};
});
};

a.fn.imgLoad.defaults = { //默认配置
attr: "data-src",//连接占位
effect: "fadeIn",//效果
event: "scroll",//事件
threshold:0//偏移,可为正/负数
};
}(jQuery));