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