我有一个网页,我希望用户在将鼠标放在图像的特定部分上时看到新图像。我使用了图像映射。
<img src="pic.jpg" usemap="#picmap" />
<map id="picmap" name="picmap"><area shape="rect" coords ="10,20,30,40"
onMouseOver="mouse_on_write('mouse is on spot')"
onMouseOut="mouse_off('mouse is off spot')"
href="http://www....html" target="_blank" />
</map>
<p id="desc"></p>
我在 header 中定义了这些函数:
<script type="text/javascript">
function mouse_off(txt)
{
document.getElementById("desc").innerHTML=txt;
document.p1.src="pic.jpg";
}
function mouse_on_write(txt)
{
document.getElementById("desc").innerHTML=txt;
document.p1.src="pic2.jpg";
</script>
它有效,但速度很慢。当鼠标放在第二张图片上时,它需要几秒钟才能出现;我的临时解决方案是大幅减小图像的大小,因为它们很大(在 2.5mb 时它们现在可以快速切换,但仍然不是无缝的)。 如何在不降低图片质量的情况下使图像切换更加无缝? 转念一想,我意识到我也可以同时显示两个图像,分别以小比例和大比例显示,鼠标悬停在它们上方时,它们会切换位置;我该怎么做?这会减少延迟吗?
最佳答案
您不需要创建任何页面元素,它们都可以使用 JavaScript 预加载:
tempImg = new Image()
tempImg.src="pic2.jpg"
编辑:
如果你有很多图片,你可以使用穷人的多预加载器:
preloads = "red.gif,green.gif,blue.gif".split(",")
var tempImg = []
for(var x=0;x<preloads.length;x++) {
tempImg[x] = new Image()
tempImg[x].src = preloads[x]
}
关于javascript - 如何预缓存图像以便使用 javascript 快速查看?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/287750/