JavaScript的預先載入圖像

Question

我想預先載入圖像，下面的代碼工作：

$(document).ready(function(){ 
    $(".member-photos img").each(function(){ 
     var id = $(this).attr("data-id"); 
     var file = $(this).attr("data-file"); 
     var img = new Image(); 
     img.src = "/user-data/images/image.php?id="+id+"&file="+file+"&width=600&crop=false"; 
    }); 
}); 

但我想解決的問題是，瀏覽器就會顯示在該選項卡中紡「加載」圖標。有沒有辦法可以做到這一點，所以它不會持續旋轉，直到圖像加載完成？我想要加載頁面和縮略圖，然後開始在背景中加載較大的圖像，而沒有選項卡中的旋轉圖標。

Answer 1

使用bighostkim的回答AJAX部分，和load()事件，我得到了我想要的

爲了達到預期的結果，每個循環都需要在事件內。將其放入ready()事件會導致圖像在頁面圖像之前開始加載，導致頁面圖像在隊列中掛起並在預加載的圖像之後加載。大多數瀏覽器只允許同時從同一主機加載幾個項目，其他瀏覽器必須等到某個點打開（除非它來自不同的主機）。

$(window).load(function(){ 
    $(".member-photos img").each(function(){ 
     var id = $(this).attr("data-id"); 
     var file = $(this).attr("data-file"); 
     $.ajax({ url : "/user-data/images/image.php?id="+id+"&file="+file+"&width=600&crop=false", cache: true, processData : false }); 
    }); 
}); 

Answer 2

做的東西和添加圖像10張圖片。他們裝載沒有任何喧囂。我剛剛在我的互聯網上嘗試過，這是一種慢的龜。

我認爲瀏覽器等到您的功能的所有圖像完成爲止，因爲您有$(document).ready(function() { });。

Fiddle

var i = 1; 
$(document).ready(function(){ 
    $(window).stop(); 
    $("img").hide(); 
    $("img").each(function(){ 
     var source = $(this).attr("src"); 
     var img = new Image(); 
     img.className = i; 
     img.src = source; 
     $('body').append(img); 
     $("."+i).hide().fadeIn(); 
     i++; 
    }); 
}); 

Answer 3

沒有測試過我的想法呢。

我認爲您在文檔準備就緒時會同步加載圖像文件，因此Chrome會告訴用戶加載沒有完成。

不顯示旋轉圖像，你應該使用服務器的AJAX調用接收圖像，並可以將其添加到文檔或什麼也不做（因爲它已經緩存）

$.ajax({ url : <<image_url>>, cache: true, processData : false, }) 
.success(function(){ 
    $(document).append($("<img/>").attr("src", <<image_url>>).hide()); 
});