用jCarousel预加载图像

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