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

Question

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

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

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

谢谢，

迈克尔

Answer 1

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

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

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 文件中，该文件包含在我的所有页面中，方法如下：

$(文档).ready(function() {

自定义.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...
        }
    });

}