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

我还确保您删除的内容是您期望的内容。

jquery图像预加载问题

1 个答案: