html图片加载特效（预加载和加载失败）

调用的方法

$(function () {
                $("img").delayLoading({
                    // defaultImg: "static/images/timg.gif", // 预加载前显示的图片
                    errorImg: "",                        // 读取图片错误时替换图片(默认：与defaultImg一样)
                    imgSrcAttr: "src",                  // 读取图片的src
                    setImg: "originalSrc",              //记录图片路径的属性(默认：originalSrc，把页面img的src属性值传给originalSrc属性)
                    beforehand: 0,                       // 预先提前多少像素加载图片(默认：0)
                    event: "scroll",                      // 触发加载图片事件(默认：scroll)
                    duration: "slow",                    // 三种预定淡出(入)速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000),默认:"normal"
                    container: window,                   // 对象加载的位置容器(默认：window)
                    success: function (imgObj) { },      // 加载图片成功后的回调函数(默认：不执行任何操作)
                    error: function (imgObj) { }         // 加载图片失败后的回调函数(默认：不执行任何操作)
                });
            });

需要创建引入lyz.delayLoading.min.js，名字自定义，把下面代码复制进去

jQuery.fn.extend({
	delayLoading: function(a) {
		a = jQuery.extend({
			defaultImg: "",
			errorImg: "",
			imgSrcAttr: "src",
			setImg: "originalSrc",
			beforehand: 0,
			event: "scroll",
			duration: "normal",
			container: window,
			success: function() {},
			error: function() {}
		}, a || {});
		if (a.errorImg === undefined || a.errorImg === null || a.errorImg === "") {
			a.errorImg = a.defaultImg
		}
		var e = $(this);
		$("img[" + a.imgSrcAttr + "]").each(function() {
			$(this).attr(a.setImg, $(this).attr(a.imgSrcAttr));
			$(this).attr("src", a.defaultImg)
		});

		function g(d) {
			var b, c;
			if (a.container === undefined || a.container === window) {
				b = $(window).scrollTop();
				c = $(window).height() + $(window).scrollTop()
			} else {
				b = $(a.container).offset().top;
				c = $(a.container).offset().top + $(a.container).height()
			}
			return d.offset().top + d.height() + a.beforehand >= b && c >= d.offset().top - a.beforehand
		}

		function h(d) {
			var b, c;
			if (a.container === undefined || a.container === window) {
				b = $(window).scrollLeft();
				c = $(window).width() + $(window).scrollLeft()
			} else {
				b = $(a.container).offset().left;
				c = $(a.container).offset().left + $(a.container).width()
			}
			return d.offset().left + d.width() + a.beforehand >= b && c >= d.offset().left - a.beforehand
		}

		function f() {
			e.filter("img[" + a.setImg + "]").each(function(d, b) {
				if ($(b).attr(a.setImg) !== undefined && $(b).attr(a.setImg) !== null && $(b).attr(a.setImg) !== "" && g($(b)) &&
					h($(b))) {
					var c = new Image;
					c.onload = function() {
						$(b).attr("src", c.src);
						a.duration !== 0 && $(b).hide().fadeIn(a.duration);
						$(b).removeAttr(a.setImg);
						a.success($(b))
					};
					c.onerror = function() {
						$(b).attr("src", a.errorImg);
						$(b).removeAttr(a.setImg);
						a.error($(b))
					};
					c.src = $(b).attr(a.setImg)
				}
			})
		}
		f();
		$(a.container).bind(a.event, function() {
			f()
		})
	}
});