用jCarousel預加載圖像

我有下面的代碼加載一個JSON提要，並創建jCarousel工作所需的所有HTML。但是，我不確定如何預加載圖像。任何人有任何想法如何做到這一點？用jCarousel預加載圖像

$(".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>"; 
}

來源

2011-08-01 dotty

這應該做的伎倆，但是，它是未經測試，並且可以進一步優化：

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

來源

2011-08-01 15:16:45 karim79

'變種IMG = $（「」）.attr（「 SRC」，data.imageURL）;'應'變種IMG = $（「」）.attr（「src」，this.imageURL）;'除此之外，它效果很好。 – dotty

@dotty - 哎呀，你是對的。用那個更新了我的答案。很高興它解決了你的問題！ – karim79

再次感謝，這爲我節省了很多頭痛。 – dotty

可能不是一個很好的解決方案，但你可以嘗試的地方加載圖像在頁面上隱藏的div，使他們獲取緩存你做一個AJAX調用之前和loadTopBanner方法使用它們。這樣，傳送帶不會在加載圖像時顯示任何延遲。

來源

2011-08-01 15:10:36 ShankarSangoli

如果你真的想預先載入圖像，你不需要把它們放在一個隱藏的div - 您可以使用Image對象：

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

來源

2011-08-01 15:15:21

用jCarousel預加載圖像

回答

相關問題