強制在其他背景圖片之前加載背景圖片

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>