Question

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

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

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

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

是的，有一个解决方案！结帐List<Company>：

Background Changing

Answer 2

可能有html中的图像，使用CSS显示：none;

Answer 3

如果请求成功，您可以使用HttpRequest aqnd加载图像，图像将在浏览器缓存中。因此，如果您添加它，它将无需进一步加载即可使用。

但这仅适用于来自同一域的图像。

function load(url) {
   $.get(url, function(data){
      console.log('Image is ready to use');
   });
}

如何更改＆＃34;背景图像＆＃34;没有图像加载很长一段时间，并得到一个空白的backgorund

3 个答案: