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

Question

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

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

着陆页 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 ready?

，有没有办法确保我的背景图像在显示渐变之前显示？

Answer 1

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

Answer 2

也许我为您编写的脚本如您所愿。通过使用 JS，不可能设置 CSS 伪元素，例如 :before。

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

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

最后，我监听 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>

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

Force a background image to be loaded before other background images

javascript

jquery

background-image

linear-gradients

document-ready