这段代码帮助我修复了浏览器缓存问题:

$("#my_image").on('load', function() {

    console.log("image loaded correctly"); 
}).each(function() {

     if($(this).prop('complete')) $(this).load();
});

当浏览器缓存被禁用时，只有以下代码不起作用:

$("#my_image").on('load', function() {
     console.log("image loaded correctly"); 
})

为了让它工作，你必须添加:

.each(function() {
     if($(this).prop('complete')) $(this).load();
});

在完整加载图像和EventListener时，我遇到了很多问题。

不管我怎么试，结果都不可靠。

但后来我找到了解决办法。它在技术上不是一个很好的一个，但现在我从来没有失败的图像加载。

我做了什么:

                    document.getElementById(currentImgID).addEventListener("load", loadListener1);
                    document.getElementById(currentImgID).addEventListener("load", loadListener2);

                function loadListener1()
                    {
                    // Load again
                    }

                function loadListener2()
                {
                    var btn = document.getElementById("addForm_WithImage"); btn.disabled = false;
                    alert("Image loaded");
                }

而不是一次加载图像，我只是在第一次之后直接加载第二次，两者都运行在事件处理程序中。

我的头痛都好了!

顺便说一下: 你们这些来自stackoverflow的家伙已经帮了我上百次了。为此非常感谢!

使用imagesLoaded javascript库。

可用的纯Javascript和作为jQuery插件。

特点:

IE8+正式支持 许可协议:麻省理工学院 依赖性:没有 重量(缩小&压缩):7kb缩小(轻!)

资源

项目在github: https://github.com/desandro/imagesloaded 官方网站:http://imagesloaded.desandro.com/ https://stackoverflow.com/questions/26927575/why-use-imagesloaded-javascript-library-versus-jquerys-window-load Imagesloaded javascript库:浏览器和设备支持什么?

从页面上的图像元素检索信息 在Chrome和Firefox上测试工作 使用jsFiddle(打开控制台查看结果)

$('img').each(function(){ // selecting all image element on the page

    var img = new Image($(this)); // creating image element

    img.onload = function() { // trigger if the image was loaded
        console.log($(this).attr('src') + ' - done!');
    }

    img.onerror = function() { // trigger if the image wasn't loaded
        console.log($(this).attr('src') + ' - error!');
    }

    img.onAbort = function() { // trigger if the image load was abort
        console.log($(this).attr('src') + ' - abort!');
    }

    img.src = $(this).attr('src'); // pass src to image object

    // log image attributes
    console.log(img.src);
    console.log(img.width);
    console.log(img.height);
    console.log(img.complete);

});

注意:我使用jQuery，我认为这可以实现在完整的javascript

我在这里找到了很好的信息——>，这是一个法语论坛

按此顺序检查complete和naturalWidth属性。

https://stereochro.me/ideas/detecting-broken-images-js

function IsImageOk(img) {
    // During the onload event, IE correctly identifies any images that
    // weren’t downloaded as not complete. Others should too. Gecko-based
    // browsers act like NS4 in that they report this incorrectly.
    if (!img.complete) {
        return false;
    }

    // However, they do have two very useful properties: naturalWidth and
    // naturalHeight. These give the true size of the image. If it failed
    // to load, either of these should be zero.
    if (img.naturalWidth === 0) {
        return false;
    }

    // No other way of checking: assume it’s ok.
    return true;
}

在阅读了本页上有趣的解决方案后，我创建了一个易于使用的解决方案，深受SLaks和Noyo的帖子的影响，似乎在Chrome、IE、Firefox、Safari和Opera(都在Windows上)的最新版本上都可以使用。此外，它还可以在我使用的iPhone/iPad模拟器上运行。

这个解决方案与SLaks和Noyo的帖子之间的一个主要区别是，这个解决方案主要检查naturalWidth和naturalHeight属性。我发现在当前的浏览器版本中，这两个属性似乎提供了最有帮助和最一致的结果。

这段代码在图像完全加载成功时返回TRUE。当图像尚未完全加载或加载失败时，它返回FALSE。

你需要注意的一件事是，如果图像是0x0像素的图像，这个函数也会返回FALSE。但这些图像是相当不常见的，我想不出一个非常有用的情况下，你会想要检查一个0x0像素的图像是否已经加载:)

首先，我们将一个名为“isLoaded”的新函数附加到HTMLImageElement原型，以便该函数可以用于任何图像元素。

HTMLImageElement.prototype.isLoaded = function() {

    // See if "naturalWidth" and "naturalHeight" properties are available.
    if (typeof this.naturalWidth == 'number' && typeof this.naturalHeight == 'number')
        return !(this.naturalWidth == 0 && this.naturalHeight == 0);

    // See if "complete" property is available.
    else if (typeof this.complete == 'boolean')
        return this.complete;

    // Fallback behavior: return TRUE.
    else
        return true;

};

然后，任何时候我们需要检查图像的加载状态，我们只需调用“isLoaded”函数。

if (someImgElement.isLoaded()) {
    // YAY! The image loaded
}
else {
    // Image has not loaded yet
}

根据giorgian在SLaks和Noyo的帖子上的评论，如果你打算改变SRC属性，这个解决方案可能只能用于Safari Mobile上的一次性检查。但是您可以通过创建一个带有新的SRC属性的图像元素来解决这个问题，而不是在现有的图像元素上更改SRC属性。