如何检查图像是否已成功预加载？ [复制]答案

【问题标题】：How do I check if an image has preloaded successfully? [duplicate]如何检查图像是否已成功预加载？ [复制]
【发布时间】：2011-05-20 20:15:01
【问题描述】：

可能重复：
Check if an image is loaded (no errors) in JavaScript

通过设置img.src被javascript加载后。

谢谢...！

【问题讨论】：

标签： javascript

【解决方案1】：

您可以像这样使用load 事件：

var img = document.getElementById('imgID');

// or

var img = new Image;

img.onload = function(){
  alert('The image has been loaded');
  img.src = 'image path here';
};

或者当你使用window 的load 事件时，图像会被加载：

window.onload = function(){
  // everything is loaded now
};

【讨论】：

这不适用，因为我没有为 img 设置 id，因为它没有被放置在 div 中。不过谢谢！
@mtay：你在做什么？例如，您是用new Image 创建它吗？
@mtay：这只是一个例子。它也适用于Image-object。
@elusive：没错，我想我也应该编辑我的答案以反映这一点:)
@Sarfraz：您可能应该补充一点，window.onload 不适用于动态创建的图像。

【解决方案2】：

在这个帮助下

var img = new Image();  
// Create image

$(img).load(function() {
    // Image Loaded notification
}).error(function () {  
    // Error Notification here
}).attr({ 
    id: "Set Id",  
    src: "Image Source",
    title: "Title Here",
    alt: "Alt here"
});

【讨论】：

我认为您在这里遇到了语法错误。 .error() 的回调函数缺少关闭 }。

【解决方案3】：

var myImg = new Image();

myImg.onload = function(){
   alert('loaded');
}

myImg.src = '../images/someImage.jpg';

【讨论】：

这个想法+1，但 JavaScript 区分大小写。应该是 onload，而不是 onLoad。

【解决方案4】：

纯 JavaScript（无 jQuery）解决方案可在此处进行测试：http://jsfiddle.net/Sztxs/1/ （基于现有答案）

您可以将其集成到一个函数中，然后使用该函数进行预加载，而不必为每个预加载的图像编写新的 onload 函数。

当然，你可以拥有任何你想要的东西而不是警报。

如果您需要任何进一步的帮助，请告诉我们。 :)

【讨论】：