jquery Loading图片延迟加载js特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery Loading图片延迟加载js特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery Loading图片延迟加载特效</title>
<script src="js/jquery-1.6.js" type="text/javascript"></script>
<script src="js/lyz.delayLoading.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
	$("img").delayLoading({
		defaultImg: "images/loading.jpg",           // 预加载前显示的图片
		errorImg: "",                        // 读取图片错误时替换图片(默认：与defaultImg一样)
		imgSrcAttr: "originalSrc",           // 记录图片路径的属性(默认：originalSrc，页面img的src属性也要替换为originalSrc)
		beforehand: 0,                       // 预先提前多少像素加载图片(默认：0)
		event: "scroll",                     // 触发加载图片事件(默认：scroll)
		duration: "normal",                  // 三种预定淡出(入)速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000),默认:"normal"
		container: window,                   // 对象加载的位置容器(默认：window)
		success: function (imgObj) { },      // 加载图片成功后的回调函数(默认：不执行任何操作)
		error: function (imgObj) { }         // 加载图片失败后的回调函数(默认：不执行任何操作)
	});
});
</script>
<style type="text/css">
.box{ width:1200px; margin:0 auto;}
.box ul li { width:245px; height:245px; float:left; margin:10px; border:1px solid #e6e6e6; list-style:none; }
.box ul li img{ width:100%; min-height:245px;}
</style>
</head>
<body>
<div class="box">
	<ul>
        <li><img originalsrc="images/hua_8.jpg.680.510.jpg" /></li>
        <li><img originalsrc="images/_2.jpg.680.510.jpg" /></li>
        <li><img originalsrc="images/_1.jpg.680.510.jpg" /></li>
        <li><img originalsrc="images/1_030ZTF23528.jpg" /></li>
        <li><img originalsrc="images/1_1225092K5R48.jpg" /></li>
        <li><img originalsrc="images/1_122FU1035612.jpg" /></li>
        <li><img originalsrc="images/_30.jpg.680.510.jpg" /></li>
        <li><img originalsrc="images/_1.jpg.680.510.jpg" /></li>
        <li><img originalsrc="images/hua_8.jpg.680.510.jpg" /></li>
        <li><img originalsrc="images/_2.jpg.680.510.jpg" /></li>
        <li><img originalsrc="images/_1.jpg.680.510.jpg" /></li>
        <li><img originalsrc="images/1_030ZTF23528.jpg" /></li>
        <li><img originalsrc="images/1_1225092K5R48.jpg" /></li>
        <li><img originalsrc="images/1_122FU1035612.jpg" /></li>
        <li><img originalsrc="images/_30.jpg.680.510.jpg" /></li>
        <li><img originalsrc="images/_1.jpg.680.510.jpg" /></li>
        <li><img originalsrc="images/16.jpg" /></li>
        <li><img originalsrc="images/17.jpg" /></li>
        <li><img originalsrc="images/18.jpg" /></li>
        <li><img originalsrc="images/19.jpg" /></li>
    </ul>
</div>
</body>
</html>

JS代码(lyz.delayLoading.min.js):

/** Summary:lyz.delayLoading 1.0* Author:����־* Date:2011* Emial:c_sharp@live.cn*/
jQuery.fn.extend({
	delayLoading:function(a){
	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.imgSrcAttr+"]").each(function(d,b){
	if($(b).attr(a.imgSrcAttr)!==undefined&&$(b).attr(a.imgSrcAttr)!==null&&$(b).attr(a.imgSrcAttr)!==""&&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.imgSrcAttr);
	a.success($(b))}
;
	c.onerror=function(){
	$(b).attr("src",a.errorImg);
	$(b).removeAttr(a.imgSrcAttr);
	a.error($(b))}
;
	c.src=$(b).attr(a.imgSrcAttr)}
}
)}
a=jQuery.extend({
	defaultImg:"",errorImg:"",imgSrcAttr:"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);
	if(e.attr("src")===undefined||e.attr("src")===null||e.attr("src")==="")e.attr("src",a.defaultImg);
	f();
	$(a.container).bind(a.event,function(){
	f()}
)}
}
);

附件:下载该文件资源,减少时间成本(增值服务)