用jQuery检查图像是否加载(无错误)

我使用JavaScript和jQuery库来操作包含在无序列表中的图像缩略图。当图像加载时，它做一件事，当错误发生时，它做另一件事。我使用jQuery load()和error()方法作为事件。在这些事件之后，我检查图像DOM元素中的.complete，以确保在jQuery注册这些事件之前图像还没有加载。

它可以正常工作，除非在jQuery注册事件之前发生错误。我能想到的唯一解决方案是使用img onerror属性来存储一个“标志”全局的某个地方(或在节点上它的自我)，说它失败了，这样jQuery就可以在检查.complete时检查“store/node”。

有人有更好的解决办法吗?

编辑:粗体要点和添加额外的细节如下: 我正在检查图像是否完整(又名加载)后，我添加了一个加载和错误事件的图像。这样，如果图像是在事件注册之前加载的，我仍然会知道。如果图像在事件之后没有加载，那么当它加载时，事件会处理它。这样做的问题是，我可以很容易地检查图像是否已经加载，但我不知道是否发生了错误。

372362 次浏览
小开

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

< a href = " https://stereochro。我/想法/ detecting-broken-images-js noreferrer“rel = > 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;
}
小开
最佳答案

另一个选项是通过在内存中创建一个图像元素并将其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"))
;

希望这能有所帮助!

小开

据我所知，.complete属性是非标准的。这可能不是普遍的……我注意到它在Firefox和IE中的工作方式似乎有所不同。我在javascript中加载了一些图像，然后检查是否完整。在Firefox中，这似乎工作得很好。在IE中，它不会，因为图像看起来是加载在另一个线程上。只有当我对图像的赋值之间有延迟时，它才会起作用。src，检查image。complete属性。

使用图像。Onload和image。onerror也不适合我，因为我需要传递一个参数，以便在调用函数时知道我谈论的是哪个图像。任何这样做的方式似乎都失败了，因为它实际上传递的是同一个函数，而不是同一个函数的不同实例。所以我传递给它用来识别图像的值总是循环中的最后一个值。我想不出任何办法来解决这个问题。

在Safari和Chrome上，我看到image.complete true和naturalWidth设置，即使错误控制台显示该图像的404…我特意删除了那张图片来测试一下。但是上面的方法在Firefox和IE上都很有效。

小开

这是我如何让它跨浏览器使用上述方法的组合(我还需要动态插入图像到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变量提供一个有效的布尔状态。

小开

我尝试了很多不同的方法，只有这个方法对我有效

//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/

小开

Realtime network detector -在不刷新页面的情况下检查网络状态: (它不是jquery，但经过测试，并且100%工作:(在Firefox 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>
小开

使用imagesLoaded javascript库。

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

特点:

资源

小开

在阅读了本页上有趣的解决方案后，我创建了一个易于使用的解决方案，深受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属性。

小开

使用这个JavaScript代码，你可以检查图像是否成功加载。

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

试试这个

小开

基于我对img元素的W3C HTML规范的理解，你应该能够使用complete和naturalHeight属性的组合来做到这一点，如下所示:

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

来自complete属性的规范:

IDL属性complete如果出现以下任何一种情况，必须返回true 条件为true:

  • src属性省略。
  • 获取资源后由网络任务源排队的最后一个任务已经排队。
  • img元素是完全可用的。
  • img元素被破坏了。

否则，该属性必须返回false。

因此，本质上，如果图像已经完成加载或加载失败，complete将返回true。由于我们只想要图像成功加载的情况，我们还需要检查nauturalHeight属性:

IDL属性naturalWidth和naturalHeight必须返回 图像的固有宽度和高度，以CSS像素为单位，如果图像

而available的定义如下:

img总是处于以下状态之一:

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

当img元素处于部分可用状态或处于 完全可用状态，即可用。

因此，如果图像“破碎”(加载失败)，那么它将处于破碎状态，而不是可用状态，因此naturalHeight将为0。

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

你可以在img元素的W3C HTML规范或在中数中阅读更多关于此的内容。

小开

从页面上的图像元素中检索信息
测试工作在Chrome和Firefox
Working 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 ->这是一个法语论坛

小开

在完整加载图像和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的家伙已经帮了我上百次了。为此非常感谢!< / p >

小开

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

$("#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()
小开

这个对我来说很好:)

$('.progress-image').each(function(){
var img = new Image();
img.onload = function() {
let imgSrc = $(this).attr('src');
$('.progress-image').each(function(){
if($(this).attr('src') == imgSrc){
console.log($(this).parent().closest('.real-pack').parent().find('.shimmer').fadeOut())
}
})
}
img.src = $(this).attr('src');
});

提交答案