jquery - 背景图像已预加载但再次加载

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%'
    });
});​