强制在其他背景图像之前加载背景图像答案

【问题标题】：Force a background image to be loaded before other background images强制在其他背景图像之前加载背景图像
【发布时间】：2017-04-07 07:16:01
【问题描述】：

有没有办法在下载其他图像之前强制下载特定图像（优先图像）？

我使用许多背景图片。我的着陆页有一个渐变填充，用作我的着陆页的第二张图片。

着陆页 CSS：

.bg-img1::before {
  background-image: url(https://mywebsite/images/myimage.jpg), linear-gradient(to top, #206020, white);
  background-size: cover, cover;
}

我从使用 DOM 就绪检测切换，因为我的背景图像渐变显示在我的着陆页图像下载前 3 或 4 秒...

$(function() {
    // DOM ready, but image hasn't downloaded yet.
});

现在我使用 window.onload 一切正常，但我添加的图片越来越多，下载延迟越来越大。

window.onload = function() {
  // delay, delay... finally my landing page with gradient displays
});

重申我的问题，我希望能够优先下载我的着陆页。如果我切换回使用 DOM 就绪，有没有办法确保在显示渐变之前显示我的背景图像？

【问题讨论】：

标签： javascript jquery background-image linear-gradients document-ready

【解决方案1】：

添加一个图像标签并将源代码放入其中。确保将 display none 添加到此标签。将此标签放在身体标签的最高位置。这应该优先考虑您的图像加载。希望这对你有用。

【讨论】：

它成功了。我对 display:none 使用了内联样式。

【解决方案2】：

也许我为您编写的脚本可以按您的预期工作。通过使用 JS，不可能设置 CSS 伪元素，例如 :before。

我所做的是更改代码，以便在图像容器中提供 img URL 作为data 属性。

然后使用 JavaScript 隐藏所有图像容器并开始动态创建新图像，然后将 src 属性设置为 section 元素的 data-img 的值。

最后，我监听load 和error 事件，然后再次显示容器。这样你就可以确定，它已经在浏览器中加载了图像，因此当它显示的图像容器中，图像已经就位了。

(
  function ( $, window, undefined ) {
  
    var img_container = null;
    var img_loaded = 0;
  
    var hide_img_containers = function hide_img_containers() {
      if ( 0 < img_container.length ) {
        img_container.hide();
      }
    }
    
    var show_img_containers = function show_img_containers( $element ) {
      $element.show();
    }
    
    var load_images = function () {
      img_container.each(
        function() {
          var $section = $( this );
          var $img = $section.attr( 'data-img' );
          var img = document.createElement('img');
          
          img.src = $img;
          img.addEventListener( 
            'load',
            function () {
              show_img_containers ( $section );
            }
          );
          
          img.addEventListener( 
            'error',
            function () {
              show_img_containers ( $section );
            }
          );
        }
      );
    }
  
    $( document ).ready(
      function ( $ ) {
      
        img_container = $( '.img_container' );
        
        hide_img_containers ();
        load_images();
                
      }
    );
  
  }
)( jQuery, this );

.img_container {
    min-height: 250px;
    position: relative;
}

.img_container:before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
}

#sec_1:before {
    background-image: url(http://www.lifeofpix.com/wp-content/uploads/2017/03/dscf0786.jpg), linear-gradient(to top, #206020, #fff);
    background-size: cover, cover;
}

#sec_2:before {
    background-image: url(http://www.lifeofpix.com/wp-content/uploads/2017/03/dscf0357.jpg), linear-gradient(to top, #206020, #fff);
    background-size: cover, cover;
}

#sec_3:before {
    background-image: url(http://www.lifeofpix.com/wp-content/uploads/2016/05/Life-of-Pix-free-stock-street-lights-wall-PaulJarvis.jpg), linear-gradient(to top, #206020, #fff);
    background-size: cover, cover;
}

#sec_4:before {
    background-image: url(http://www.lifeofpix.com/wp-content/uploads/2017/03/1-276.jpg), linear-gradient(to top, #206020, #fff);
    background-size: cover, cover;
    background-position: 50% 50%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="sec_1" class="img_container" data-img="http://www.lifeofpix.com/wp-content/uploads/2017/03/dscf0786.jpg"></section>
<section id="sec_2" class="img_container" data-img="http://www.lifeofpix.com/wp-content/uploads/2017/03/dscf0357.jpg"></section>
<section id="sec_3" class="img_container" data-img="http://www.lifeofpix.com/wp-content/uploads/2016/05/Life-of-Pix-free-stock-street-lights-wall-PaulJarvis.jpg"></section>
<section id="sec_4" class="img_container" data-img="http://www.lifeofpix.com/wp-content/uploads/2017/03/1-276.jpg"></section>

【讨论】：