Javascript 如何预加载这些图像以使此函数更平滑？

我大约每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();
  });     
});  

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

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

---

如何在每个函数之前预加载有问题的图像？

在html末尾，创建一个设置为隐藏的div，并向其添加img标记，如下所示：

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

....

您可以在此处找到其他方法：

---

您需要预先加载它们，否则就没有区别了。没有骰子。甚至将我的js切换到.ready to$（window）.bind（“load”，function（）{您是否尝试过链接中的其他方法？有时，当页面加载且脚本运行速度很快时，它可能会在预加载图像之前调用图像。在链接中，您可以将选项1添加到头部，并应在启动onReady之前加载图像。