使用jquery检查图像是否已加载(无错误)

另一种选择是触发 onload 和/或 onerror 通过创建内存中的图像元素并设置 src 属性为原始 SRC 原始图像的属性。以下是我的一个例子:

$("<img/>")
    .on('load', function() { console.log("image loaded correctly"); })
    .on('error', function() { console.log("error loading image"); })
    .attr("src", $(originalImage).attr("src"))
;

希望这有帮助!

检查 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;
}

基于我对 the W3C HTML Specification for the img element ,您应该能够使用 complete 和 naturalHeight 属性,如:

function imgLoaded(imgElement) {
  return imgElement.complete && imgElement.naturalHeight !== 0;
}

从规范 完成 属性:

如果存在以下任何情况,idl属性complete必须返回true 条件是真实的:

• SRC属性被省略。
• 在资源提取后由网络任务源排队的最后一个任务已排队。
• img元素完全可用。
• IMG元素已损坏。

否则,属性必须返回false。

因此,本质上, 完成 如果图像已完成加载或加载失败,则返回true。因为我们只需要图像成功加载的情况,所以需要检查 nauturalHeight 属性也是:

IDL属性 naturalWidth 和 自然高度 必须返回 图像的固有宽度和高度,以css像素为单位,如果图像 可用,否则为0。

和 available 定义如下:

IMG始终处于以下状态之一:

• 不可用的 -用户代理未获取任何图像数据。
• 部分可用 -用户代理已获取一些图像数据。
• 完全可用 -用户代理已获取所有图像数据,并且至少图像尺寸可用。
• 破碎的 -用户代理已经获得了它所能获得的所有图像数据,但它甚至无法对图像进行足够的解码以获得图像。 尺寸(例如图像损坏或格式不正确 支持,或者无法获取数据)。

当img元素处于部分可用状态或处于 完全可用的状态,据说是可用的。

因此,如果图像是“断开”(加载失败),那么它将处于断开状态,而不是可用状态,因此 自然高度 将是0。

因此,检查 imgElement.complete && imgElement.naturalHeight !== 0 应该告诉我们图像是否已成功加载。

你可以在 W3C HTML规范 IMG 要素 或 on MDN .

我尝试了很多不同的方法,这是唯一对我有用的方法

//check all images on the page
$('img').each(function(){
    var img = new Image();
    img.onload = function() {
        console.log($(this).attr('src') + ' - done!');
    }
    img.src = $(this).attr('src');
});

还可以添加一个回调函数,该函数在所有图像加载到DOM并就绪后触发。这也适用于动态添加的图像。 http://jsfiddle.net/kalmarsh80/nrAPk/

使用 imagesLoaded javascript library .

可用于纯javascript和jquery插件。

特征:

• officially supported by IE8+
• 许可证:麻省理工学院
• 依赖项:无
• 重量(缩小&gzip):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 library: what is the browser & device support?

实时网络检测器-在不刷新页面的情况下检查网络状态: (它不是jquery,而是测试过的,100%都可以工作:(在火狐v25.0上测试过)

代码:

<script>
 function ImgLoad(myobj){
   var randomNum = Math.round(Math.random() * 10000);
   var oImg=new Image;
   oImg.src="YOUR_IMAGELINK"+"?rand="+randomNum;
   oImg.onload=function(){alert('Image succesfully loaded!')}
   oImg.onerror=function(){alert('No network connection or image is not available.')}
}
window.onload=ImgLoad();
</script>

<button id="reloadbtn" onclick="ImgLoad();">Again!</button>

如果连接断开,请按“再次”按钮。

更新1: 自动检测而不刷新页面:

<script>
     function ImgLoad(myobj){
       var randomNum = Math.round(Math.random() * 10000);
       var oImg=new Image;
       oImg.src="YOUR_IMAGELINK"+"?rand="+randomNum;
       oImg.onload=function(){networkstatus_div.innerHTML="";}
       oImg.onerror=function(){networkstatus_div.innerHTML="Service is not available. Please check your Internet connection!";}
}

networkchecker = window.setInterval(function(){window.onload=ImgLoad()},1000);
</script>

<div id="networkstatus_div"></div>

从页面上的图像元素检索信息
测试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

我在这里找到了好消息 OpenClassRoom -->这是一个法国论坛

这就是我如何让它使用上述方法的组合跨浏览器工作(我还需要将图像动态插入到DOM中):

$('#domTarget').html('<img src="" />');

var url = '/some/image/path.png';

$('#domTarget img').load(function(){}).attr('src', url).error(function() {
    if ( isIE ) {
       var thisImg = this;
       setTimeout(function() {
          if ( ! thisImg.complete ) {
             $(thisImg).attr('src', '/web/css/img/picture-broken-url.png');
          }
       },250);
    } else {
       $(this).attr('src', '/web/css/img/picture-broken-url.png');
    }
});

注意:您需要为isie变量提供一个有效的布尔状态。

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

这一解决方案与Slaks和Noyo's Post的一个主要区别是,该解决方案主要检查自然宽度和自然高度属性。我发现在当前的浏览器版本中,这两个属性似乎提供了最有用和最一致的结果。

当图像完全成功加载时,此代码返回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属性创建一个image元素来解决这个问题,而不是更改现有image元素的src属性。

据我所知,完整的属性是不标准的。它可能不是万能的…我注意到它在firefox版本中的工作方式似乎不同,比如,我在javascript中加载了许多图像,然后检查是否完整。在火狐中,这似乎很管用。在IE中,这不是因为图像似乎正在加载到另一个线程上。只有当我在对image.src的赋值和检查image.complete属性之间放置延迟时,它才有效。

使用image.onload和image.onerror对我也不起作用,因为我需要传递一个参数来知道调用函数时我在讨论哪个映像。任何这样做的方法似乎都失败了,因为它实际上似乎传递了相同的函数,而不是相同函数的不同实例。因此,我传递给它以标识图像的值始终是循环中的最后一个值。我想不出任何办法来解决这个问题。

在Safari和Chrome上,我看到了image.complete true和naturalwidth设置,即使错误控制台显示该图像的404…我故意删除了那个图像来测试这个。但是上面的内容对于火狐和IE很有效。

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

$("#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();
});

var isImgLoaded = function(imgSelector){
  return $(imgSelector).prop("complete") && $(imgSelector).prop("naturalWidth") !== 0;
}

//或作为插件

    $.fn.extend({
      isLoaded: function(){
        return this.prop("complete") && this.prop("naturalWidth") !== 0;
      }
    })

// $(".myImage").isLoaded() 

使用此 JavaScript 可以检查图像是否已成功加载的代码。

document.onready = function(e) {
        var imageobj = new Image();
        imageobj.src = document.getElementById('img-id').src;
        if(!imageobj.complete){ 
            alert(imageobj.src+"  -  Not Found");
        }
}

试试这个

我在完全加载图像和事件侦听器时遇到了很多问题。

不管我做了什么,结果都不可靠。

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

我做了什么:

                    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");
                }

不是一次加载图像,而是在第一次之后直接第二次加载它,并且都通过事件处理程序运行。

我所有的头痛都消失了!

顺便说一句: 你们从斯塔克沃尔夫来的人已经帮了我上百次了。为此非常感谢!