javascript - 如何使用setInterval直到图像未加载？

Question

我使用 setInterval 在鼠标悬停时更改图像，我希望仅在图像加载后再次调用设置间隔，或者下一个间隔出现。 以下是我的代码:

jQuery('.product').on('mouseover',function(){
timer = setInterval(function() {
  if (counter !== 0) {
    time = 2000;
  }
  if (counter === product_images.length) {
    counter = 0;
  }
  selector.attr('src', 'localhost/product/' + product_images[counter]);

  var loadImage = new Image();
  loadImage.src = selector.attr('src');
  loadImage.onload = function(){
     selector.show();
  };
  counter = counter + 1;
},1000);
});

我想要的是，在使用设置的间隔时间来显示下一张图像之前，下一张图像不应加载，直到上一张图像未加载...而那时我想显示加载图像

我如何使用 jquery Promise 或其他解决方案来做到这一点。 请帮助我...

还有一件事，我不想调用下一个间隔，直到第一个图像未加载

Answer 1

您可以使用 document.ready

调用 document.ready 中的函数，因此一旦页面完全加载，您的函数就会被调用