Javascript 使用jCarousel预加载图像

下面的代码加载一个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>";
}

$（“.banner ul”）.jcarousel({
itemLoadCallback:loadTopBanner，
汽车:6,，
包装：“圆形”，
卷轴：1，
动画：1000，
ItemFallback维度：10
});
函数loadTopBanner（旋转木马，状态）{
$.getJSON（“get_top_banner.php”），函数（数据）{
转盘尺寸（数据长度）；
$。每个（数据、功能（i）{
add（i，makeTag（this.imageURL，this.URL））；
});
});
}
函数makeTag（img，url）{
返回“”；
}

可能不是一个好的解决方案，但您可以尝试将图像加载到页面上某个隐藏的div中，以便在进行ajax调用并在loadTopBanner方法中使用它们之前将其缓存。这样，旋转木马在加载图像时不会显示任何延迟。

如果确实要预加载图像，则无需将其放入隐藏的div中，您可以使用图像对象：

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

这应该可以做到，但是，它未经测试，可以进一步优化：

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

函数loadTopBanner（旋转木马，状态）{
$.getJSON（“get_top_banner.php”），函数（数据）{
转盘尺寸（数据长度）；
//创建可附加加载事件的元素数组
var-imgs=[]；
$。每个（数据、功能（i）{
var-img=$（“
var-img=$”（“应该是
var-img=$”）但除此之外，它工作得很好。@dotty-oops，你是对的。用它更新了我的答案。很高兴它解决了你的问题！再次感谢，这让我省去了很多头痛。只是一个跟进，这有时在IE7（和8）中有效，但有时不行。似乎
（'load'））
不会一直被调用，或者可能是
this.complete
没有正确触发它。有什么想法吗？