Question

我有一个动态加载图片的JSP页面。现在，我在这个页面上也有一些“输入”元素，例如复选框和使用javascript模块创建的选择菜单（为输入元素创建不同的样式）。

我的问题是，页面尝试加载的图像之一在它尝试打开的外部链接上不存在。服务器仅在15秒后响应，表示图像不存在。这意味着我必须等待15秒才能加载我的“输入”元素，因为只有在我的页面上所有图像完全加载后才会激活javascript模块。

我有没有办法设置加载图像的超时时间，例如，在尝试加载图像5秒后，它会停止请求？

谢谢，

迈克尔

Answer 1

如果希望在加载/未加载图像之前执行脚本，则应在关闭body标记之前使用DOMready事件或触发模块。

关于检查图像是否存在，您可以执行以下操作：

var img = $(new Image()).load(function() {
    // image exists
}).error(function() {
    // image does not exist
}).attr('src','some-image-url.jpg');

这应该跨浏览器工作（它使用onError事件：https://developer.mozilla.org/En/XUL/Image#a-onerror）

Answer 2

我认为这是无法做到的，因为加载图像的过程在浏览器中非常根深蒂固，无法直接访问或终止。

可能的解决方法：

5秒后检查图像是否具有适当的尺寸。如果没有，请删除图像的DOM元素。我不确定这会停止加载，但我认为应该。

Answer 3

非常感谢你的所有答案，你给了我很好的线索，说明我应该做些什么。

在创建“input”元素的JavaScript模块中，以下行写在脚本的底部：

window.onload = Custom.init;

我基本上把这一行拿出来，然后把它写在我的header.jsp文件中，该文件包含在我的所有页面中，方式如下：

$（document）.ready（function（）{

Custom.init（）;

}）;

再次感谢您的快速回复，

迈克尔

Answer 4

您可以在加载图像之前设置超时，并测试加载错误。

function LoadImage(yourImage) {

    var imageTimer = setTimeout(function () {
        //image could not be loaded:
        alert('image load timed out');
    }, 10000); //10 seconds

    $(yourImage).load(function (response, status, xhr) {
        if (status == 'error') {
            //image could not be loaded:
            alert('failed to load image');

        } else {
            //image was loaded:
            clearTimeout(imageTimer);
            //display your image...
        }
    });

}

尝试加载不存在的外部图像时，请停止使用超时加载图像

4 个答案: