我正在使用 jQuery 从 php 数组构建图像数组。我想循环浏览这些图像,预加载它们,同时显示一些加载 gif,直到加载所有图像。
目前,我已经尝试了很多方法来这样做,页面的其余部分似乎总是在继续加载,因此图像正在被预加载,但不是在页面加载其余内容之前加载。
这是我所拥有的:
<script type="text/javascript">
// Get list of images and build array + set vars
var imgArray = new Array;
var imgCount = <?php echo count($files); ?>;
var imgNum = <?php echo $rand; ?>;
var imgDir = "<?php echo $dir; ?>";
var imgBlurDir = "<?php echo $blurdir; ?>";
$(document).ready(function() {
<?php
for ($i=0;$i<count($files);$i++) {
echo "imgArray[$i]='" . $files[$i] . " ' ; \n";
}
?>
// Preload Images:
$('mainImg #orig').html('<img src="images/preload.gif" style="position: relative; top: 310px;" />');
for(i=0; i<imgCount; i++) {
$('<img>').attr("src", imgDir+imgArray[i]).load(function() { $('.profile').append( $(this) )});
$('<img>').attr("src", imgBlurDir+imgArray[i]).load(function() { $('.profile').append( $(this) )});
}
// ^^^^ this doesnt work yet...
$('#mainImg #orig').html("<img src='"+imgDir+imgArray[imgNum]+"' />").delay(10).fadeIn(1000);
});
</script>
正如您所看到的,#orig 设置为显示 preload.gif,那么图像应该被预加载,然后 #orig 应该改变并淡入当前在数组中选择的图像。这种情况不会发生,我从来没有看到 gif,并且图像在页面加载后会继续加载一段时间。
请多多指教,非常感谢!
最佳答案
您正在创建一个字符串并将其插入到文档中,它应该成为 DOM 的一部分。你需要做的是创建一个 JS Image 对象,有点像这样:
// Preload Images:
for(i=0; i<imgCount; i++) {
var image_preload = new Image();
image_preload.src = imgDir+imgArray[i];
}
关于jquery - 使用 jquery 预加载图像数组,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3862879/