1

想象一个灯箱，里面有一张漂亮的图片，附近有一个按钮可以导航到下一张图片......

当用户单击下一个按钮时，JS 会这样做：

var Image = new Image();
Image.onload = getWidth;
Image.onerror = getFailure; 
Image.src = "http://somewebsite.mr/pics/4.png";

然后当图片加载完毕，JS进入getWidth函数，求图片的宽度：

w = this.width;  //height is not needed as CSS will adjust it correctly

之后，JS根据图片的宽度改变灯箱的宽度（加一点paddings做边框）。然后，JS 将当前显示在灯箱中的图片的 src 属性更改为http://somewebsite.mr/pics/4.png。这会改变灯箱中的图片...

灯箱是这样建造的吗？这可行，但我需要确保它是跨浏览器并且无论如何都可以正常工作。你能告诉我你对开发灯箱的了解吗？有没有另一种方式来完成这项工作？也许您知道一些可能损害该程序的问题？

编辑：我担心的是在灯箱的情况下图像预加载是否有问题。会不会跨浏览器？我知道其余的工作。我只需要知道如何更改灯箱中的图片。我只是图像预加载的新手。是主要技术吗？

4

1 回答 1

2

你的概念听起来很对。但是，在创建灯箱时，需要注意许多跨浏览器问题。我不知道列出所有这些的手册或文章，但也许​​您可以通过查看其他灯箱的源代码找到灵感。我个人发现 Greg Neustaetter 的多面灯箱非常易于理解和定制。

于 2009-12-19T15:24:08.250 回答