用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预加载图像

回答

相关问题