层移动时background不断反复下载如何解决？

Gdj 2007-09-03 06:03:17

<div id="Layer1" style="position:absolute">
<table width="300" border="0" cellspacing="0" cellpadding="0">
<tr>
<td background="/images/test.jpg"> </td>
</tr>
</table>
</div>
<script language="JavaScript" type="text/JavaScript">
document.onmousemove=function(e)
{
e=e?e:window.event;
document.getElementById('Layer1').style.pixelLeft=e.x;
document.getElementById('Layer1').style.pixelTop=e.y;
}

一个非常简单的拖动效果。但是在拖动过程中，background这张图被反复下载，闪烁得厉害。如果你的机器好看不出来闪烁，就多加几张背景图，可以看到左下角不停出现下载。用前景图则不会反复下载。

请教解决背景图反复下载的办法。

...全文

184 7 打赏收藏转发到动态举报

写回复

用AI写文章

7 条回复

切换为时间正序

请发表友善的回复…

发表回复

浪尖赏花 2007-09-03

打赏
举报

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>new page</title>
</head>
<body>
<div id="Layer1" style="position:absolute">
<table width="300" border="0" cellspacing="0" cellpadding="0">
<tr>
<td id=td1 bgproperties="fixed">　</td>
</tr>
</table>
</div>

</body>
<script language="JavaScript" type="text/JavaScript">
var img=new Image();
img.src="/images/test.jpg";
document.getElementById('td1').background=img.src;
document.onmousemove=function(e)
{
e=e?e:window.event;
document.getElementById('td1').background="#";
document.getElementById('Layer1').style.pixelLeft=e.x;
document.getElementById('Layer1').style.pixelTop=e.y;
document.getElementById('td1').background=img.src;
}
</script>
</html>

saillovemeng 2007-09-03

打赏
举报

我在msdn找了下，
解决方法是在head加
<script>
document.execCommand("BackgroundImageCache", false, true);
</script>

BackgroundImageCache只在ie才有效，ff会抛出异常，所以楼主要自己判断一下是什么浏览器

Gdj 2007-09-03

打赏
举报

我的代码就在顶楼。直接copy进一个空白页的body就可以看到。外面本来就有空白div用于施拽的。再套几套也无济无事。里面的内容不变化。但只要一拖动，还是会不断下载图片。

打开网页后，把图片目录改名。然后一拖动div，背景图就消失了。

saillovemeng 2007-09-03

打赏
举报

我之前也遇到过这样，我不清楚你的代码是怎样的，
我是这样解决的，先在table外套一层空白div然后再加一层div拖拽。
如果<td background="/images/test.jpg"> </td>里面的内容要变化，就改成
<td background="/images/test.jpg"><div> </div></td>

Gdj 2007-09-03