精简版jquery lazyload实现真正的延时图片加载
本次修改基于jquery.lazyload.js 1.5版本，删除了一些配置项，只保留了effect和placeholder配置，并且指定容器为window。
使用注意事项
1）要实现真正的延时加载，将图片的src设置为默认的替换图片，实际的图片地址存储到自定义属性original
如<img src='替换的图片地址，1px_1px' original='实际图片地址'/>
2）如果没有按照第一步进行设置，那么将在下载图片的时候中断图片下载，如果图片大的话效果还是比较明显的，不过还是强烈建议按照第一种方法来设置
3）修正了计算图片位置的代码，如果是浮动布局，右边浮动的图片需要拖动最下面的时候才会显示。所示布局如下
================页头================
左边浮动布局 右边浮动布局
================页脚================
源代码如下
(function ($) {
$.fn.lazyload = function (options) {
var settings = { effect: "fadeIn", placeholder: '/images/grey.gif' };
if (options) $.extend(settings, options);
var elements = this;
$(window).bind("scroll", function (event) {
elements.each(function () {
if ($.inScreen(this)) $(this).trigger("appear");
});
var temp = $.grep(elements, function (element) { return !element.loaded; });
elements = $(temp);
});
this.each(function () {
var self = this;
$(self).one("appear", function () {
if (!this.loaded) {
$("<img />").bind("load", function () {
$(self).hide().attr("src", $(self).attr("original"))[settings.effect](settings.effectspeed);
self.loaded = true;
}).attr("src", $(self).attr("original"));
}
});
if (!$(self).attr("original")) $(self).attr('original', $(self).attr('src')).attr('src', settings.placeholder);//判断选择其中的图片是否设置了original属性，如果没有则打断图片加载，设置为替换图片
});
$(window).trigger('scroll'); return this;
};
$.inScreen = function (e) { var et = $(e).offset().top+$(e).height(), st = $(window).scrollTop(), sh = $(window).height(); return et >= st && et <= st + sh; }//判断图片是否在显示的区域内
})(jQuery);
不过有一个问题，实际图片存储在original属性中，不知道会对seo有影响没有，因为google，百度有图片搜索引擎，增加图片的alt也能给网站带来流量，如果进行这种修改后，不知道是否对图片seo有影响。
加支付宝好友偷能量挖...
原创文章，转载请注明出处：精简版jquery lazyload实现真正的延时图片加载