缺乏對AJAX預加載（帶有示例）

我交換通過jQuery的例如一個頁面的內容的理解，對page1.html我：缺乏對AJAX預加載（帶有示例）

$('#wrapper').fadeOut(2500, function() { 
    $(this).load('page2.html', function() { 
     $(this).fadeIn(2500); 
    }); 
});

的page2.html內容包含一些相當大的圖像，我試圖通過$.get()預加載它們page1.html：

$.get('img/largeImage1.jpg'); 
$.get('img/largeImage2.jpg'); 
// etc...

一切從我讀過，我正確地做這個。問題是，在Firefox中，當我第一次嘗試顯示largeImage2.jpg時（它最初隱藏着CSS），它看起來像破碎的圖像一樣簡短。當在page2.html中對圖像標籤進行硬編碼（或通過不同的方法「預加載」）時，即在頁面上的某處放置<img src="img/largeImage2.jpg" style="display: none;">，破碎的圖像不存在。

爲什麼$.get()方法不起作用？難道我做錯了什麼？爲什麼Firefox在加載之前會顯示一個破碎的圖像幾分之一秒？是否jQuery的清空瀏覽器的緩存/緩衝區，所以我的預加載嘗試是無用的？這是怎麼回事？

來源

2014-02-17 daveycroqet

我懷疑$.get是不是真的做什麼，你認爲它是被使用。如果圖像不在DOM的某個位置，瀏覽器沒有理由緩存它。 $.get只是將資源作爲AJAX流獲取，並且不會將其插入到DOM中。

請參閱this SO answer從一些預加載看起來更安全的替代方法。

來源

2014-02-17 01:14:36

您的答案是最豐富的，您的鏈接提供了一個良好的工作解決方案。謝謝。 – daveycroqet

很高興能幫到你。 –

.get確實不能正常工作，還是不能按照您認爲的那樣工作？

，一般用於像

$.get("ajax/test.html", function(data) { 
    $("#myId").html(data); 
    alert("Load was performed."); 
});

或jQuery的load可以作爲

$("#myId").load ("ajax/test.html"); // to load into the element with id myid

來源

2014-02-17 01:12:30

對於你的第一個例子;你正在考慮['.load（）']（https://api.jquery.com/load/）方法。 – Marty

我知道它正在工作，因爲它會在page1.html中加載圖像。但是當內容更改爲page2時，我會簡要地看到破碎的圖像。 – daveycroqet

@Marty謝謝，我能感覺到它將成爲那些日子之一。 –

如果要預先加載圖像，則可以使用this answer和this answer中的算法。這個想法是將圖像加載到實際的<img>對象中，這將允許瀏覽器緩存它們。而且，當像這樣預加載時，您還必須等到圖像實際加載後再使用它們。如果你這樣做，你可以保證圖像一旦插入到DOM中就會顯示出來。

在代碼中，至少有兩個問題：

$.get()可能不會實際緩存。
在繼續操作之前，您並未等待它們實際加載。

來源

2014-02-17 01:17:55 jfriend00

我不認爲第二點是一個問題：如果我正確理解OP的問題，圖像至少在2.5秒內不顯示（2.5 s淡出，2.5 s淡入）。它不得不是一個非常大的圖像（或一個非常慢的連接），不能及時加載該圖像。 –

缺乏對AJAX預加載（帶有示例）

回答

相關問題