jQuery检查图片是否加载完成

Question

我需要帮助解决以下代码问题，目前代码不能正常工作：

var timeoutID=0;
var currentImage=0;//第一张图片在arrImages数组中的位置为0
var arrImages=[一堆图片URL];
function slideShow()
{
   if($('#myImg').complete)//<------- 出现UNDEFINED错误
   {
      //curentImage是全局变量，用于记录当前屏幕上显示的图片数组键名
      var nextImage=currentImage+1;
//arrImages是图片URL的数组
      if(nextImage>=arrImages.length){nextImage=0;}
 $('#myImg').attr('src',nextImage);
clearTimeout(timeoutID);
      //每次加载完上一张图片后，每秒钟更换一次图片
      timeoutID=setTimeout("slideShow()",1000);
   }
   else
   {
      $('#myImg').load(slideShow);
   }
}

基本上，我想要每秒钟更换 #myImg 的 src，但前提是必须在图片加载完成后才能开始计时。

*我讨厌 Stack Overflow 文本编辑器中的代码按钮！

- Francisc

---

我假设您在IE中遇到了问题，对吗？在IE中，img.complete和load大多数情况下不会被触发，除非您在附加事件之后注入src。 - KJYe.Name

哈哈，也许吧！我的意思是肯定的。你能否再详细解释一下？ - Francisc

请看这篇博客文章。虽然代码片段是在MooTools中，但问题仍然存在。另外，请阅读评论。http://davidwalsh.name/image-load-event - KJYe.Name

你应该将其作为答案发布，kjy112。 - Francisc

Answer 1

'complete' 是用于原生 JavaScript 对象的。因此，您应该从 jQuery 中获取 JavaScript 对象。例如：

$('#myImg')[0].complete

或者

$('#myImg').get(0).complete

- Sang

Answer 2

如果我没记错的话，图片在加载时会获取宽度和高度。所以你可以检查图片的宽度。只要宽度为0，那么图片就没有加载完成。

- Domen Grabec

---

嗨，Domen。这是一个好的提示，只是我正在使用相同的图像容器来顺序加载图像。因此，一旦第一张图片被加载，它将始终具有宽度和高度。即使我通过编程方式更改src。 - Francisc

@Domen 那么对于设置默认加载图像的浏览器呢？还有那些在加载时不完全加载图像（模糊显示）的浏览器呢？ - Omar Abid