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

Posted 2023-02-21

【中文标题】如何检查图像是不是已成功预加载？ [复制]

【英文标题】：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加载后。

谢谢...！

【参考方案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 函数。

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

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