解决图片预装载问题

本文探讨了网页中根据图片尺寸动态调整显示大小的方法,并提供了解决方案,包括使用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>


原文是

[img]http://dl.iteye.com/upload/picture/pic/64714/37ce4740-112d-3cfb-9802-b01306d5635c.jpg[/img]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值