배경 이미지가 사전로드되지만 다시로드됩니다.

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