基于jQuery的图片加载loading效果插件-老鄢博客

发布时间：2014-06-19 16:56:16 作者：admin 阅读：1034次

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