jQuery的图像预加载问题

Question

我正在尝试使用jquery + php创建服务器端图像旋转，当后端返回新图像时，我想对其进行预加载，并在完成时切换背景。 除预加载外，其他所有功能均正常运行，在切换过程中，只有白色会出现几秒钟。

这是我有的JavaScript

var current='';

function loadNext(){



 $.ajax({
url: 'rotate.php?next='+current,
context: document.body
}).done(function($resp) {
     current = $resp;

     var imageUrl = 'image.php?next='+current;
     var img = $('<img />');
     img.attr('src', imageUrl);
     img.hide();



     img.load(function(){
      $('body').css('background-image', 'url(' + imageUrl + ')');
      $(this).remove();
     });

     $('body').append(img);

});

}

setInterval(loadNext, 15000);

Answer 1

我认为您需要在加载图像时像这样添加图像：

var current='';

function loadNext() {
  $.ajax({
    url: 'rotate.php?next='+current,
    context: document.body
  }).done(function($resp) {
      current = $resp;

      var imageUrl = 'image.php?next='+current;
      var img = $('<img />');
      img.attr('src', imageUrl);
      img.hide();

      var currentImg = $(this);

      img.load(function() {
        $('body').css('background-image', 'url(' + imageUrl + ')');
        currentImg.remove();
        $('body').append(img);
      });

  });

}

setInterval(loadNext, 15000);

我还确保删除的东西是您期望的东西。