javascript - 为什么两个相同的 Javascripts 之一在 Firefox 中工作？

Question

我有两个图像交换功能，一个可以在 Firefox 中使用，另一个不能。交换函数是相同的，并且在 IE 中都可以正常工作。 Firefox 甚至无法将图像识别为超链接。我很困惑，我希望有人能为我阐明这一点。非常感谢您提供的所有帮助。

仅供引用:工作脚本通过 DIV 元素由 onClick 交换，非工作脚本通过“a”元素交换 onMouseOver/Out。请记住，这两项在 IE 中都可以正常工作。

约书亚

在 FF 中使用 Javascript:

<script type="text/javascript">
    var aryImages = new Array();

    aryImages[1] = "/tires/images/mich_prim_mxv4_profile.jpg";
    aryImages[2] = "/tires/images/mich_prim_mxv4_tread.jpg";
    aryImages[3] = "/tires/images/mich_prim_mxv4_side.jpg";

    for (i=0; i < aryImages.length; i++) {
        var preload = new Image();
        preload.src = aryImages[i];
    }

    function swap(imgIndex, imgTarget) {
        document[imgTarget].src = aryImages[imgIndex];
    }

<div id="image-container">
<div style="text-align: right">Click small images below to view larger.</div>

<div class="thumb-box" onclick="swap(1, 'imgColor')"><img src="/tires/images/thumbs/mich_prim_mxv4_profile_thumb.jpg" width="75" height="75" /></div>
<div class="thumb-box" onclick="swap(2, 'imgColor')"><img src="/tires/images/thumbs/mich_prim_mxv4_tread_thumb.jpg" width="75" height="75" /></div>
<div class="thumb-box" onclick="swap(3, 'imgColor')"><img src="/tires/images/thumbs/mich_prim_mxv4_side_thumb.jpg" width="75" height="75" /></div>

<div><img alt="" name="imgColor" src="/tires/images/mich_prim_mxv4_profile.jpg" /></div>

不在 FF 中工作:

<script type="text/javascript">

    var aryImages = new Array();

    aryImages[1] = "/images/home-on.jpg";
    aryImages[2] = "/images/home-off.jpg";
    aryImages[3] = "/images/services-on.jpg";
    aryImages[4] = "/images/services-off.jpg";
    aryImages[5] = "/images/contact_us-on.jpg";
    aryImages[6] = "/images/contact_us-off.jpg";
    aryImages[7] = "/images/about_us-on.jpg";
    aryImages[8] = "/images/about_us-off.jpg";
    aryImages[9] = "/images/career-on.jpg";
    aryImages[10] = "/images/career-off.jpg";

    for (i=0; i < aryImages.length; i++) {
        var preload = new Image();
        preload.src = aryImages[i];
    }

    function swap(imgIndex, imgTarget) {
        document[imgTarget].src = aryImages[imgIndex];
    }

                <td>
                <a href="home.php" onMouseOver="swap(1, 'home')" onMouseOut="swap(2, 'home')"><img name="home" src="/images/home-off.jpg" alt="Home Button" border="0px" /></a>
              </td>

Answer 1

您的两个示例对我都适用，尽管它们是古老的 Netscape 3 时代编码的非常没有吸引力的示例。

var aryImages = new Array();
aryImages[1] = "/tires/images/mich_prim_mxv4_profile.jpg";

数组是 0 -索引。目前您的循环将尝试访问 aryImages[0]得到一个undefined ，这将尝试(并失败)预加载。 new Array 很少用到今天的构造函数。而是使用数组文字:

var images= [
    '/tires/images/mich_prim_mxv4_profile.jpg',
    '/tires...
];

还有:

    document[imgTarget].src = aryImages[imgIndex];

我们不会那样做，或者 <img name>任何更多。优先给图像一个 id属性并使用 document.getElementById() 访问它.

否则，当图像名称与页面上的文档属性和其他命名项目发生冲突时，这会导致各种问题。也许您遇到了名称冲突问题，在我们看不到的文档部分中有其他名为“home”的东西。虽然如果“甚至不将图像识别为超链接”意味着您没有让指针在链接上改变或显示链接地址，但我怀疑您实际得到的是我们在这里看不到的代码布局问题，您不小心将另一个元素放置在导航顶部，因此无法点击它。

无论如何，将图像加载到这样的元素中对于可管理性、可用性和可访问性来说是很差的。使用正常的图像链接(这样它们就可以在没有 JavaScript 的情况下工作)并在顶部添加渐进式增强 JS，例如:

<style type="text/css">
    .thumb { display: block; }
    .thumb img { width: 75px; height: 75px; border: none; vertical-align: top; }
</style>


<a class="thumb" href="/tires/images/mich_prim_mxv4_profile.jpg">
    <img src="/tires/images/thumbs/mich_prim_mxv4_profile_thumb.jpg" alt="" />
</a>
<a class="thumb" href="/tires/images/mich_prim_mxv4_tread.jpg">
    <img src="/tires/images/thumbs/mich_prim_mxv4_tread_thumb.jpg" alt="" />
</a>
<a class="thumb" href="/tires/images/mich_prim_mxv4_side.jpg">
    <img src="/tires/images/thumbs/mich_prim_mxv4_side_thumb.jpg" alt="" />
</a>

<img id="thumbshow" src="/tires/images/mich_prim_mxv4_profile.jpg" alt="" />


<script type="text/javascript">
    // Bind to links with thumb class
    //
    for (var i= document.links.length; i-->0;) {
        if (document.links[i].className==='thumb') {

            // Preload main image
            //
            var img= new Image();
            img.src= document.links[i].href;

            // When clicked, copy link address into image source
            //
            document.links[i].onclick= function() {
                document.getElementById('thumbshow').src= this.href;
                return false;
            }
        }
    }
</script>

同样，现在大多数人都使用 CSS 背景图片进行简单的翻转。如果你使用 CSS Sprites ，您甚至不需要两个单独的图像，因此不需要预加载或任何类型的 JavaScript。