jquery.LoadImage图片预加载特效代码

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

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

以下是 jquery.LoadImage图片预加载特效代码的示例演示效果:

当前平台(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.LoadImage图片预加载</title>
<style>
*{ margin:0; padding:0; list-style:none;}
.main{ width:800px; height:600px; margin:0px auto;}
</style>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.LoadImage.js"></script>
<script>
$(function(){
	$(".main img").LoadImage(true,800,600,"images/loading.gif");
});
</script>
</head>

<body>
<div class="main">
<img alt="" title="" src="images/zzsc.jpg"/>
</div>
</body>
</html>

JS代码(jquery.LoadImage.js):

/***************图片预加载插件******************/
//作者：没剑(2008-06-23)///http://regedit.cnblogs.com///说明：在图片加载前显示一个加载标志，当图片下载完毕后显示图片出来可对图片进行是否自动缩放功能此插件使用时可让页面先加载，而图片后加载的方式，解决了平时使用时要在图片显示出来后才能进行缩放时撑大布局的问题///参数设置：scaling 是否等比例自动缩放width 图片最大高height 图片最大宽loadpic 加载中的图片路径*/
jQuery.fn.LoadImage=function(scaling,width,height,loadpic){
	if(loadpic==null)loadpic="load3.gif";
	return this.each(function(){
	var t=$(this);
	var src=$(this).attr("src")var img=new Image();
	//alert("Loading...")img.src=src;
	//自动缩放图片var autoScaling=function(){
	if(scaling){
	if(img.width>0 && img.height>0){
	if(img.width/img.height>=width/height){
	if(img.width>width){
	t.width(width);
	t.height((img.height*width)/img.width);
}
else{
	t.width(img.width);
	t.height(img.height);
}
}
else{
	if(img.height>height){
	t.height(height);
	t.width((img.width*height)/img.height);
}
else{
	t.width(img.width);
	t.height(img.height);
}
}
}
}
}
//处理ff下会自动读取缓存图片if(img.complete){
	//alert("getToCache!");
	autoScaling();
	return;
}
$(this).attr("src","");
	var loading=$("<img alt=\"加载中...\" title=\"图片加载中...\" src=\""+loadpic+"\" />");
	t.hide();
	t.after(loading);
	$(img).load(function(){
	autoScaling();
	loading.remove();
	t.attr("src",this.src);
	t.show();
	//alert("finally!")}
);
}
);
}

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