jquery - 如何更改 "background-image"而无需长时间加载图像并获得空白背景

Question

我有一个每 2 秒更改一次背景的主页 - 使用带有 background-image 的 jQuery 直接更改。

问题是每次图像更改时，它都必须加载并且我得到一个空白屏幕。

有没有办法在背景中加载图像，以便浏览器识别图像路径或类似的东西而不需要空白背景？

对于 jQuery 甚至不是必需的。如果有更简单的作弊，那将是非常棒的。

<script type="text/javascript">

  $(document).ready(function(){

      var count = 1; 


      // Auto Rotate: 
      autoRotate();

      function autoRotate() {
          intervalId = window.setInterval(function () {
              rotateNext();
          }, 8000);
      }



      // Move to the next slide: 
      function rotateNext() {


        switch (count) {

          case 3:
              count = 1;           
              $('.main').css("background-image", "url(main-1.jpg)");
              break;

          case 2: 
              count = 3;
              $('.main').css("background-image", "url(main-3.jpg)");  
              break;

          case 1: 
              count = 2; 
              $('.main').css("background-image", "url(main-2.jpg)");  
              break;

        }

      }


     // On Click Right:
      $('.r-arrow').click(function(){
          window.clearInterval(intervalId);
          rotateNext();
          autoRotate();
      });





      function rotatePrev(){

        switch (count) {

          case 1:
              count = 1;           
              $('.main').css("background-image", "url(main-3.jpg)");  
              break;

          case 2: 
              count = 1;
              $('.main').css("background-image", "url(main-1.jpg)");  
              break;

          case 3: 
              count = 2; 
              $('.main').css("background-image", "url(main-2.jpg)");  
              break;

        }

      }




      // On Click Left:
      $(".l-arrow").click(function(){
          window.clearInterval(intervalId);
          rotatePrev();
          autoRotate();
      });







  });

</script>


<div class="main">

  <img src="White_Arrow_top_2.png" class="r-arrow an-arrow" />
  <img src="White_Arrow_top_2.png" class="l-arrow an-arrow" />
</div>

Answer 1

是的，有一个解决方案!检查此示例:

Background Changing