Javascript jquery图像预加载问题

我正在尝试使用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);

var电流=”；
函数loadNext（）{
$.ajax({
url:'rotate.php？next='+current，
上下文：document.body
}).完成（功能（$resp）{
当前=$resp；
var imageUrl='image.php？next='+当前；
var img=$（'我认为在像这样加载图像时需要附加图像：

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);

var电流=”；
函数loadNext（）{
$.ajax({
url:'rotate.php？next='+current，
上下文：document.body
}).完成（功能（$resp）{
当前=$resp；
var imageUrl='image.php？next='+当前；
变量img=$（'
我还确保您删除的内容是您期望的内容。
我在这里看到一个问题。每次间隔滚动时，您都在添加。您应该在函数外使用img对象。这会使您的页面越来越重……可能就是这个问题。您需要调用img.hide（）吗？如果它在加载下一个之前隐藏，那可能是白屏闪烁。我认为您的代码没有意义。因为您更改了body的背景图像，并且还将相同的图像作为html标记附加到body？！也许您真的应该使用$.ajax预加载图像，并从success闭包接收变量，然后使用此f或者图像源。这应该是一个真正的预加载。@lalborno为什么它会使它更重，加载完成后它会将它从dom中删除。@Yogurthewise img我使用的只是让浏览器缓存图像，我从来不想显示它。我只是附加到正文，所以浏览器会缓存它，我根本不需要图像。类似的东西