解决图片预装载问题

今天有人在群里提出了 这么个问题

<script language="javascript" type="text/javascript">
	function  bigimage(imageurl)
	{
	var varname = new  Image();
	varname.src = imageurl;
	if   (varname.width>99)
	{
	document.write   ( "  <IMG   SRC= "+varname.src+ " border=0 width=230 height=320> ");
	alert("datu")
	}
	else
	{
	document.write   ( " <IMG   SRC= "+varname.src+ "  width = 120 height = 180 border=0> ");
	alert( " xiaotu");
	}
	}
</script> 

为什么只会显示小图.。。。。。。。

这是因为在获得image的width属性时  图片还没预装完！！
通过alert("varname.width")可以让图片装载完毕.........


解决方法是

<script <script language="javascript" type="text/javascript">
function loadImage(url)
{
var varname = new  Image();
varname.src =url;
bigimage(url);
}

function  bigimage(imageurl)
	{
	var varname = new  Image();
         varname.src =imageurl;
	if   (varname.width>99)
	{
	document.write("<IMG SRC="+imageurl+"border=0 width=230 height=320> ");
	alert("datu")
	}
	else
	{
	document.write("<IMG SRC= "+imageurl+ "  width = 120 height = 180 border=0> ");
	alert( " xiaotu");
	}
	}
</script> 

或者不用 添加的函数

把加载的图片在函数外面 执行页面时就加载.......

一些浏览器试图通过在本地缓存中保存这些图片来解决此问题。这样一来可以顺序调用这些图片——但对于首次使用这些图片的时候仍然会存在延时。预装载就是一种在需要图片之前就将图片下载到缓存的技术。采用这样的方式可以使当确实需要显示图片时迅速将其从缓存中恢复回来并立即显示。

看了java精粹这本书 得到启示

function  bigimage(imageurl)
	{
	var varname = new  Image();
        var target=new Image();
        varname.onload=function()
        {
            target.src=varname.src;
        }
        varname.src=imageurl;
	if   (target.width>99)
	{
	document.write("<IMG SRC="+target.src+" border=0 width=230 height=320> ");
	alert("datu")
	}
	else
	{
	document.write("<IMG SRC= "+imageurl+ "  width = 120 height = 180 border=0> ");
	alert( " xiaotu");
	}
	}
</script> 

原文是