转: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> | |
|
|