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承诺或其他解决方案来做到这一点。请帮帮我......

在第一张图片未加载之前，我不想再调用下一个间隔

Answer 1

你可以使用document.ready

调用document.ready中的函数，这样一旦页面完全加载，你的函数就会被调用

Answer 2

首先在页面加载页面时加载图像，然后这些图像将在浏览器缓存中然后它工作正常，试试这个：

      if (document.images) {
           img1 = new Image();
           img1.src = "imgpath/image1.png";
           img2 = new Image();
           img2.src = "imgpath/image2.png"";
       }

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

2 个答案: