解决图片预装载问题

最新推荐文章于 2020-12-15 13:32:13 发布

原创最新推荐文章于 2020-12-15 13:32:13 发布 · 102 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#浏览器

js 专栏收录该内容

31 篇文章

订阅专栏

本文探讨了网页中根据图片尺寸动态调整显示大小的方法，并提供了解决方案，包括使用JavaScript进行图片预加载技术。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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



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