Jquery动态预加载图像

时间:2013-09-24 16:21:00

标签: javascript php jquery ajax joomla

想知道为什么这不起作用......

功能:

$.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';

我如何做我上面做的,但动态?

谢谢!

1 个答案:

答案 0 :(得分:2)

这是我以前用过的图像预加载器......

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);

imagesLoaded()中的所有图片都已加载时,它会调用div.image-container

可以扩展它以处理错误,但是出于我的目的,我只是在图像完成时处理错误,否则如果任何图像因任何原因而出错,它将不会运行回调函数。