他の背景画像の前に背景画像を強制的にロードする

Question

他の画像をダウンロードする前に強制的に特定の画像（優先画像）をダウンロードする方法はありますか？

私は多くの背景イメージを使用します。ランディングページには、ランディングページの2番目のイメージとしてグラデーションが使用されています。

ランディングページのCSS：

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

私は...私のランディングページの画像がダウンロードされた前に私の背景画像勾配が3または4秒を表示したとして、DOM準備ができて検出を使用してから

$(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を必ず追加してください。このタグをあなたのbodyタグの上に置いてください。これはイメージの読み込みに優先順位を付けるべきです。これがあなたのために働くことを望みます。

Answer 2

おそらく、私があなたのためにしたスクリプトは、期待通りに動作します。 JSを使用することにより、:beforeのようなCSS疑似要素を設定することはできません。

私がしたことは、イメージコンテナにdata属性としてimg URLを提供するようにコードを変更することでした。

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>