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