如何更改“背景图像”而无需长时间加载图像并获得空白背景答案

【问题标题】：How do I change a "background-image" without having the image to load for a long time and get a blank backgorund如何更改“背景图像”而无需长时间加载图像并获得空白背景
【发布时间】：2015-08-10 08:05:51
【问题描述】：

我有一个每 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>

【问题讨论】：

编辑了我的帖子，虽然我认为没有必要。@G.L.P

标签： jquery css image performance

【解决方案1】：

是的，有一个解决方案！看看这个sample：

Background Changing

【讨论】：

【解决方案2】：

html中可能有图片，使用CSS显示：无；

【讨论】：

我在 Chrome 90 上，图像仍然没有加载 display:none。但他们做到了可见性：隐藏。

【解决方案3】：

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

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

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

【讨论】：