如何在用戶滾動之前加載onScroll背景圖像？

Question

當用戶滾動到該div的末尾時，我正在更改div的背景。 由於它是固定的背景，我不使用HTML <img>標簽，而是使用CSS background-image: . 使用以下JavaScript函數，它在我需要時成功更改背景，並在用戶滾動回頂部時恢復。

function transimg(divid,imgurl1,imgurl2) {  
  $(window).scroll(function(){
    var st = $(this).scrollTop();       
    var dist = $(divid).offset().top - 50;

    if(st > dist) {
      $(divid).css("background-image", "url(" + imgurl1 +")");  
    }
    else{
      $(divid).css("background-image", "url(" + imgurl2 +")");
    }
  }); 
} 

我的問題是：

顯然，當用戶滾動到該偏移時，這會加載圖像。 當我托管網站並且用戶連接速度慢時，這會使它變慢。 所以我需要在頁面開始加載時加載第二個圖像。 與Lazy Load相反。 我怎樣才能實現這一目標？

我真的不想使用任何插件。

任何幫助表示贊賞，提前謝謝！

Answer 1

您可以在加載前加載它們。 （在您body的末尾添加腳本）。

說明：創建Image並設置src屬性時，映像文件將下載到瀏覽器。

var images = ['img1', 'img2'];
for (var i = 0; i < images.length; i++) {
  var img = new Image();
  img.src = images[i];
}

Answer 2

您可以將2個background-images添加到divid ，因此它們都會在頁面刷新時加載，然后使用JQ在background-images之間切換，具體取決於滾動。

請參閱下面的代碼段。 讓我知道它是否有幫助（我檢查網絡，並在頁面刷新時加載兩個圖像）

 $(window).scroll(function(){ var st = $(this).scrollTop(); var dist = $("#container").offset().top - 50; if(st > dist) { $("#container").css("background-image", "url(" + "http://i.imgur.com/AsqlqnG.jpg" +")"); } else{ $("#container").css("background-image", "url(" + "http://i.imgur.com/I8170KA.jpg" +")"); } }); 

 #container { background-image : url("http://i.imgur.com/I8170KA.jpg"),url("http://i.imgur.com/AsqlqnG.jpg"); background-size:contain; background-repeat:no-repeat; height:800px; width:100%; margin-top:50px; position:relative; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id ="container"> </div>