邪罗刹的菠萝阁

> 因为不可抗拒的因素，小邪昨天下午和今天上午都在离地球上最近的电脑有11公里的地方。
> 终于，在春哥的保佑之下，小邪终于在今天下午回到了我可爱的电脑面前。

> 呵呵，这篇文章讲的东西灰常简单，因为昨天没法一日一博，只好今天早晚各一篇。
> 以弥补各位看官受伤的心灵，小邪可是很善良的喔 (*^__^*) ，哇卡卡卡卡 O(∩_∩)O。

1. 图片载入提示 Demo 传送门：

> 小邪已经使用 Opera Safari Firefox Chrome IE6 测试过图片载入提示的代码了。
> 现在浏览器缓存机制十分强大，所以如果想多次浏览，请使用 Ctrl+F5 无缓存刷新。
> 额，这个快捷键在 FF 里是可以用的，其他浏览器小邪就不清楚咯。

> http://www.evlos.org/apps/demo/images_loading

2. 当然要先载入 jQuery 库：

> 呵呵，这是为新来的童鞋提供的步骤，老童鞋就请直接跳过咯。
> 貌似原来的 lastest.js 不见了，可能太多人载入这个文件，官方服务器挺不住。
> 所以这个还是在 Google 服务器上托管的 JS 文件，请放心使用 O(∩_∩)O。

<script type="text/javascript"
src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>

3. 然后载入图片Loading提示的 jQuery 插件：

<script type="text/javascript">
(function($){
jQuery.fn.LoadImage=function(settings){
settings = jQuery.extend({ scaling : true,
width : 500,height : 500,loadpic:"" }, settings);
return this.each(function() {
$.fn.LoadImage.Showimg( $( this ), settings );
});};
$.fn.LoadImage.Showimg = function($this, settings){
var src=$this.attr("src");
var img=new Image();
img.src=src;
var autoScaling=function(){
if (settings.scaling) {
if (img.width > 0 && img.height > 0) {
if (img.width / img.height >= settings.width / settings.height) {
if (img.width > settings.width) {
$this.width(settings.width);
$this.height((img.height * settings.width) / img.width);
}else {
$this.width(img.width);
$this.height(img.height);
}}else {
if (img.height > settings.height) {
$this.height(settings.height);
$this.width((img.width * settings.height) / img.height);
}else {
$this.width(img.width);
$this.height(img.height);
}}}}}
$this.attr("src","");
var loading=$("<img alt=\"加载中...\" title=\"图片加载中...\" src=\""
+settings.loadpic+"\" />");
$this.hide();
$this.after(loading);
$(img).load(function(){
autoScaling();
loading.remove();
$this.attr("src",this.src);
$this.show();
});}})(jQuery);
</script>

4. 设置此 jQuery 插件的参数：

> Loadpic 是设置提示图片的路径，宽度高度就不用管它了。
> 这个宽度高度是图片最大高和图片最大宽，按比例缩放的，不过我们用不到。

<script type="text/javascript">
$(function(){
	$("img").LoadImage({scaling : true,
			width : 3000,
			height : 3000,
			loadpic:"imgload.gif"});
});
</script>