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

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准备就绪，有没有办法确保我的背景图像在我的渐变显示之前显示？

Answer 1

添加一个图像标签并将源代码放入其中。确保你添加了显示none到这个标签。将此标签置于身体标签中。这应该优先考虑你的图片加载。希望这对你有用。

Answer 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>