想知道为什么这不起作用......
功能:
$.fn.preload = function() {
this.each(function(){
$('<img/>')[0].src = this;
});
}
代码:
<?php $preimages = glob('images/backgrounds/*{.jpg, .png, .gif, jpeg}', GLOB_BRACE); ?>
$([
<?php
$imgcount = sizeof($preimages);
for($i = 0; $i < $imgcount; $i++) {
if($i == $imgcount-1)
echo $preimages[$i];
else
echo $preimages[$i] . ', ';
}
?>
]).preload($("#load").fadeOut());
我正在尝试预加载 Foler images/backgrounds 文件夹中的所有图像...但随后我希望回调为 $("#load").fadeOut()...
但是,当我执行以下操作时它会起作用:
img1 = new Image();
img2 = new Image();
img3 = new Image();
img1loaded = false;
img2loaded = false;
img3loaded = false;
img1.onload = function() {
img1loaded = true;
if(img1loaded && img2loaded && img3loaded) {
$("#load").fadeOut();
}
};
img2.onload = function() {
img2loaded = true;
if(img1loaded && img2loaded && img3loaded) {
$("#load").fadeOut();
}
};
img3.onload = function() {
img3loaded = true;
if(img1loaded && img2loaded && img3loaded) {
$("#load").fadeOut();
}
};
img1.src = '<?php echo $baseUrl; ?>images/backgrounds/img1.jpg';
img2.src = '<?php echo $baseUrl; ?>images/backgrounds/img2.jpg';
img3.src = '<?php echo $baseUrl; ?>images/backgrounds/img3.jpg';
我怎样才能动态地完成上面所做的事情?
谢谢!
最佳答案
这是我以前使用过的图像预加载器...
function onImagesLoaded($container, callback) {
var $images = $container.find("img");
var imgCount = $images.length;
if (!imgCount) {
callback();
} else {
$("img", $container).each(function () {
$(this).one("load error", function () {
imgCount--;
if (imgCount == 0) {
callback();
}
});
if (this.complete) $(this).load();
});
}
}
通过向其传递一个父元素(作为 jQuery 对象,而不是 DOM 元素)和一个回调函数来调用它,以便在加载所有图像时...
onImagesLoaded($("div.image-container"), imagesLoaded);
当 div.image-container
中的所有图像加载完毕后,将会调用 imagesLoaded()
。
它可以扩展以处理错误,但出于我的目的,我只是在图像完整时处理错误,否则如果任何图像因任何原因出错,它不会运行回调函数。
关于javascript - Jquery动态预加载图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18986956/