Question

我正在预加载一个我知道正在缓存的背景图片，但我的代码不会从缓存中读取它。它再次加载它就像没有缓存一样。 “imgSrcArray”实际上包含8个图像，但为了简单起见，我对此示例进行了硬编码。

有人有什么想法吗？

imgSrcArray = ["images/img0"]; 

//preload image
$.each(imgSrcArray, function (i, val) {
    $(function() { 
        $(document.body).append($("<img id='imgHid" + i + "'/>").attr("src", val).hide()) 
    }); 
});

$(document).ready(function(){
    $('#bkgrnddiv').css('backgroundImage', 'url(images/img0)');   
});

Answer 1

我已经清理了一点代码，它只加载了一次图像。也许它与在循环中附加文档加载有关。

http://jsfiddle.net/Fuejf/

var imgSrcArray = ['http://placekitten.com/200/300'];

function preload() {
    $.each(imgSrcArray, function(i, val) {
            $('body').append($("<img id='imgHid" + i + "'/>").attr("src", val).hide())

    });
}

$(function() {
    console.log('document loaded');
    preload();
});

$(document).ready(function() {
    console.log('document ready');
    $('#bkgrnddiv').css({
        'background': 'transparent url(' + imgSrcArray +') no-repeat 0 50%'
    });
});

背景图像被预加载但重新加载

1 个答案: