使用jquery预加载图像数组

我正在使用jQuery从php数组构建一个图像数组。 我想循环遍历这些图像，在显示一点加载gif的同时预加载它们，直到所有图像都被加载。

目前，我尝试了很多这样做的方法，页面的其余部分似乎总是继续加载，因此图像正在预加载，但在页面加载其余内容之前不会。

这是我有的：

 // Get list of images and build array + set vars var imgArray = new Array; var imgCount = ; var imgNum = ; var imgDir = ""; var imgBlurDir = ""; $(document).ready(function() { <?php for ($i=0;$i // Preload Images: $('mainImg #orig').html(''); for(i=0; i<imgCount; i++) { $('').attr("src", imgDir+imgArray[i]).load(function() { $('.profile').append( $(this) )}); $('').attr("src", imgBlurDir+imgArray[i]).load(function() { $('.profile').append( $(this) )}); } // ^^^^ this doesnt work yet... $('#mainImg #orig').html("").delay(10).fadeIn(1000); });  

如您所见，＃source设置为显示preload.gif，然后应预先加载图像，然后#orig应更改并淡入当前在arrays中选择的图像。 这不会发生，我从来没有看到gif和图像在页面加载后继续加载一段时间。

请指教，非常感谢！

Answer 1

您正在创建一个sting并将其插入到文档中，它应该成为DOM的一部分。 你需要做的是创建一个JS Image对象，有点像这样：

 // Preload Images: for(i=0; i