基于jQuery的图片加载loading效果插件

转:http://www.rockydo.com

<!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=gb2312" />
<title>基于jQuery的图片加载loading效果插件</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<style type="text/css">
img.loadingImg{ width:32px; height:32px;}
</style>
</head>
<body>
<script type="text/javascript">
/**
* 基于jQuery的图片加载loading效果插件
*
* @author Rocky (296456018@qq.com)
* http://www.RockyDo.com
*
* @example $("img").LoadingImg();
*
* Date: 2011-06-08
*/
$(function() {
$.fn.LoadingImg = function() {
return this.each(function() {
var that = this;
var src = $(this).attr("src2");
var img = new Image();
img.src = src;
var loading = $("<img alt=\"加载中...\" class=\"loadingImg\" title=\"图片加载中...\" src=\"loading.gif\" />");
$(this).after(loading);
$(this).hide();
$(img).load(function() {
loading.remove();
$(that).attr("src", src);
$(that).show();
});

});
};
$("img").LoadingImg();
});
</script>

<div>
<div><img src2="1.jpg" border="0" width="800" height="500"/> </div><br/><br/><br/>
<div><img src2="2.jpg" border="0" width="800" height="500"/> </div>
</div>

</body>
</html>

    A+
发布日期:2014年06月19日  所属分类:未分类

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: