检查图像是否加载（没有错误）在JavaScript中
我正在使用JavaScript与jQuery库来操纵无序列表中包含的图像缩略图。 当图像加载时，它会做一件事情，当发生错误时，它会做其他事情。 我正在使用jQuery load（）和error（）方法作为事件。 在这些事件之后，我检查了.complete的图像DOM元素，以确保图像在jQuery可以注册事件之前尚未加载。
它正常工作，除非在jQuery可以注册事件之前发生错误。 我能想到的唯一的解决scheme是使用img onerror属性在全局（或自己的节点上）存储一个“标志”，说它失败，所以jQuery可以在检查.complete时检查“store / node”。
任何人有更好的解决scheme？
编辑：主要的要点，并在下面添加额外的细节：我正在检查图像是否完整（又名加载）后，我在图像上添加一个负载和错误事件。 这样， 如果图像在事件注册之前加载，我仍然会知道。 如果图像没有在事件之后加载，那么当事件发生时，事件将会照顾它。 这个问题是，我可以很容易地检查图像是否已经加载，但我不能告诉是否发生错误。
另一个select是通过创build内存中的图像元素并将其src属性设置为原始图像的原始src属性来触发onload和/或onerror事件。 这里是我的意思的一个例子：
$("<img/>") .on('load', function() { console.log("image loaded correctly"); }) .on('error', function() { console.log("error loading image"); }) .attr("src", $(originalImage).attr("src")) ;
希望这可以帮助！
naturalWidth检查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; }
基于我对img元素的W3C HTML规范的理解，您应该可以使用complete和naturalHeight属性的组合来完成此操作，如下所示：
function imgLoaded(imgElement) { return imgElement.complete && imgElement.naturalHeight !== 0; }
从规格的complete属性：
如果满足以下任一条件，则IDL属性complete必须返回true：
- src属性被省略。
- 一旦资源被获取，由networking任务源排队的最终任务已经排队。
- img元素是完全可用的。
- img元素已损坏。
否则，该属性必须返回false。
所以基本上，如果图像已经完成加载或加载失败，则返回true。 既然我们只想要成功加载图片的情况，我们还需要检查nauturalHeight属性：
IDL属性
naturalWidth和naturalHeight必须返回图像的内部宽度和高度，如果图像可用，则返回CSS像素，否则返回0。
available的定义如下：
IMG总是处于以下状态之一：
- 不可用 – 用户代理未获取任何图像数据。
- 部分可用 – 用户代理已获取一些图像数据。
- 完全可用 – 用户代理已获取所有图像数据，并且至less可以使用图像尺寸。
- Broken – 用户代理已经获得了所有可能的图像数据，但是甚至无法对图像进行足够的解码以获取图像尺寸（例如，图像被破坏，或者格式不被支持，或者不能获得数据） 。
当img元素处于部分可用状态或处于完全可用状态时，它被认为是可用的。
因此，如果图像“破碎”（加载失败），那么它将处于中断状态，而不是可用状态，因此naturalHeight将为0。
因此，检查imgElement.complete && imgElement.naturalHeight !== 0应告诉我们图像是否成功加载。
您可以在W3C HTML规范中的img元素或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'); });
您也可以添加一个callback函数，一旦所有的图像加载到DOM中，并准备就绪。 这也适用于dynamic添加的图像。 http://jsfiddle.net/kalmarsh80/nrAPk/
使用imagesLoaded JavaScript库 。
可以使用简单的Javascript和作为一个jQuery插件。
特征：
- 正式支持IE8 +
- 执照：MIT
- 依赖关系：无
- 体重（缩小和gzipped）：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
- imagesloadedloaded JavaScript库：什么是浏览器和设备的支持？
实时networking检测器 – 检查networking状态，而不刷新页面:(这不是jQuery的，但testing，并100％的作品:(火狐v25.0testing））
码：
<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>
如果连接丢失，只需按再次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上进行testing
工作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
我在这里find很好的信息OpenClassRoom – >这是一个法国的论坛
这是我如何使用上面的方法（我也需要dynamic地插入图像到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'); } });
注意：您将需要为isIEvariables提供有效的布尔状态。
据我所知，.complete属性是非标准的。 它可能不是普遍的…我注意到它似乎在Firefox经文IE中工作不同。 我在JavaScript中加载了一些图像，然后检查是否完整。 在Firefox中，这似乎很好。 在IE中，它并不是因为图像似乎正在加载另一个线程。 它只有当我把我的任务分配给image.src和当我检查image.complete属性之间的延迟。
使用image.onload和image.onerror也不适用于我，因为我需要传递一个参数来知道当我调用函数时我正在谈论哪个图像。 任何方式做这似乎失败，因为它似乎通过相同的function，而不是不同的实例相同的function。 所以我通过它来识别图像的值总是作为循环中的最后一个值。 我想不出有什么办法解决这个问题。
在Safari和Chrome上，即使在错误控制台显示该图像的404时，我也会看到image.com完全true和naturalWidth集，并且我故意删除该图像以testing此图像。 但是，以上这些适用于Firefox和IE。
在阅读了这个页面上有趣的解决scheme之后，我创build了一个易于使用的解决scheme，这个解决scheme受到了SLaks和Noyo的post的影响，似乎在Chrome，IE，Firefox，Safari和Opera（全部在Windows上）。 另外，它在我使用的iPhone / iPad模拟器上工作。
这个解决scheme和SLaks和Noyo的文章之间的一个主要区别是这个解决scheme主要检查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属性，这个解决scheme可能只能作为Safari Mobile的一次性检查。 但您可以通过创build具有新SRC属性的图像元素来解决此问题，而不是更改现有图像元素上的SRC属性。
使用这个JavaScript代码，你可以检查图像是否成功加载或不。
document.onready = function(e) { var imageobj = new Image(); imageobj.src = document.getElementById('img-id').src; if(!imageobj.complete){ alert(imageobj.src+" - Not Found"); } }
试试这个
我有很多的问题与图像和EventListener的完整负载。
无论我尝试什么，结果都不可靠。
但后来我find了解决办法。 这在技术上不是一个好的，但现在我从来没有失败的图像加载。
我做了什么：
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帮助我已经超过了一百次。 对于这个非常大的谢谢！
