Question

这是我的代码。它适用于Chrome和Firefox，但不适用于Internet Explorer，也不适用于Mobile Safari。

$(document).ready(function () {
    $('.correct4').load(function () {
        $("#gallery .loader4").css("display", "none");
        $("#gallery .correct4").css("display", "block");
    });
});

Answer 1

我发现即使/当隐藏图像尚未加载时，IE也将触发jQuery .load() event。这就像在决定触发.load()事件时完全忽略隐藏的图像。

为了解决这个问题，我只是将我的图像放在隐藏的容器div中，而不是隐藏图像本身。然后，一旦所包含的资产完全加载，.load()事件将触发并显示已包含图像的容器。

<强> HTML：

<div id="containerDiv">
    <img src="/image.jpg" alt="" border="0" />
    <img src="/picture.jpg" alt="" border="0" />
</div>

<强> CSS：

#containerDiv {
    display: none;
}

<强> jQuery的：

$('img').load(function() {
    $('#containerDiv').css({'display': 'block'});
});

Answer 2

我会远离jQuery加载事件......你真的不想在此时加载任何东西到DOM中。您只想参考您想要在缓存中拥有的所有图像。我通常这样做。在文档就绪时创建一个空数组，为每个图像添加一个新的Image对象到数组，然后将'src'属性赋给图像，然后在数组中创建的每个图像都将在缓存中。这适用于所有浏览器......已经过测试。

$(document).ready(function () {

imagesSearchPage = new Array();

imagesSearchPage ["imageTitle01"] = new Image();
imagesSearchPage ["imageTitle01"].src = "images/imageTitle01.png";
imagesSearchPage ["imageTitle02"] = new Image();
imagesSearchPage ["imageTitle02"].src = "images/imageTitle02.png";
imagesSearchPage ["imageTitle03"] = new Image();
imagesSearchPage ["imageTitle03"].src = "images/imageTitle03.png";
});

我通常会为每个页面创建一个新数组，以保持组织有序。我知道它可能看起来像很多代码，但所有图像都将被缓存，如果需要，您还可以从数组中引用图像。

清除缓存，打开开发工具，点击网络＆gt;图像，你会看到图像。

希望这有帮助！

用于预加载图像的JavaScript在IE上不起作用

2 个答案: