Question

我有以下代码加载JSON提要并创建jCarousel工作所需的所有HTML。但是，我不确定如何预加载图像。任何人都知道如何做到这一点？

$(".banner ul").jcarousel({
    itemLoadCallback:loadTopBanner,
    auto: 6,
    wrap: 'circular',
    scroll: 1,
    animation:1000,
    itemFallbackDimension:10
});

function loadTopBanner(carousel, state){
    $.getJSON("get_top_banner.php", function(data){
        carousel.size( data.length );
            $.each(data, function(i){
                carousel.add(i, makeTag(this.imageURL, this.URL));
            });
        });
    }

function makeTag(img, url){
    return "<a href='" + url + "'><img src='" + img + "'></a>";
}

Answer 1

这个应该做的伎俩，但是，它没有经过测试，可以进一步优化：

function loadTopBanner(carousel, state) {
    $.getJSON("get_top_banner.php", function(data) {
        carousel.size(data.length);

        // make array of elements to which load events can be attached
        var imgs = [];

        $.each(data, function(i) {
            var img = $("<img/>").attr("src", this.imageURL);
            imgs.push(img);
        });

        // init a load counter
        var loadCounter = 0;

        $.each(imgs, function() {
            $(this).one("load", function() {
                loadCounter++

                // when all have loaded, add to carousel
                if (loadCounter == data.length) {
                    $.each(data, function(i) {
                        carousel.add(i, makeTag(this.imageURL, this.URL));
                    });
                }
            });
            if(this.complete) $(this).trigger("load");
        });
    });
}

Answer 2

可能不是一个好的解决方案，但你可以尝试在隐藏div中的页面上的某处加载图像，以便在进行ajax调用之前将它们缓存并在loadTopBanner方法中使用它们。这样，旋转木马在加载图像时不会出现任何延迟。

Answer 3

如果你真的想要预加载图片，你不需要把它们放在一个隐藏的div中 - 你可以使用Image对象：

var image = new Image();
image.src = "images/foo.jpg";

使用jCarousel预加载图像

3 个答案: