缺乏对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预加载（带有示例）

回答

相关问题