Question

我每隔2秒换一张背景图片，持续多秒。

 $(document).ready(function(){
  /*QUAD 1 ANIMATIONS*/

  $(".quad-1")
    .delay(2000)
    .queue( function(one){
    $(this).css('background', 'url("img/p-2.png") no-repeat scroll right bottom/cover transparent'); 
    one();
  });

  $(".quad-1")
    .delay(2000)
    .queue( function(one){
    $(this).css('background', 'url("img/p-3.png") no-repeat scroll right bottom/cover transparent'); 
    one();
  });

  $(".quad-1")
    .delay(2000)
    .queue( function(one){
    $(this).css('background', 'url("img/p-4.png") no-repeat scroll right bottom/cover transparent'); 
    one();
  });  

  $(".quad-1")
    .delay(2000)
    .queue( function(one){
    $(this).css('background', 'none'); 
    one();
  });     
});

因此动画变为闪光，因为必须将新图像加载到DOM中然后调整大小。

我不能使用精灵，因为背景图像的位置是相对的，使用右上/下

如何在每个功能之前预加载相关图像？

Answer 1

在你的html结尾处，创建一个设置为隐藏的div，并将img标签添加到它们中，如下所示：

<div style="display:none;">
   <img src="img/p-2.png" />
   <img src="img/p-3.png" />
   ....
</div>

您可以在此处找到其他方法： http://www.mediacollege.com/internet/javascript/image/preload.html

如何预加载这些图像以使此功能更流畅？

1 个答案: