div에 배경 이미지를 미리로드 하시겠습니까?

Question

나는 사업부의 배경 이미지를 사용하여 슬라이드 쇼를 만든 다음 슬라이드는 배경 이미지 값이 업데이트됩니다 증가로 :

<div id="imageBoxContainer" style="background-image: url('<?php echo $image_url[0]; ?>');"> 


function incrementSlide(){ 
    $('#imageBoxContainer').css("background-image", "url(" + theNextSlide + ")"); 
} 

문제는,있는 배경 이미지 변경이 흰색 인 경우 그 이미지가 완전히로드되기 전에 몇 초 동안

위의 아키텍처를 사용하여 배경 이미지를 미리로드 할 수 있습니까?

Answer 1

예, 접근 방식과 비슷한 방식으로 구현할 수 있습니다. 이미지를 사용하여 div 또는 이미지 요소 (배경 이미지만큼)를 배경 또는 src와 함께 추가하십시오. 그러나이 요소들을 보이지 않게 만들어서 표시하지 않도록하십시오. 그러면 모든 이미지가 캐싱되고 js가 지체없이 작동합니다.

<?php foreach($image_url as $image) {?> 
<div class="imageBoxContainerCache" style="visibility: hidden; background-image: url('<?php echo $image_url[0]; ?>');"> 
<?php } ?> 


function incrementSlide(){ 
    $('#imageBoxContainer').css("background-image", "url(" + theNextSlide + ")"); 
} 

Answer 2

내가 jQuery를 함께 프리로드 기능을 사용하여 종료 :

$.fn.preload = function() { 
    this.each(function(){ 
     $('<img/>')[0].src = this; 
    }); 
} 

// Usage: 

$(['img1.jpg','img2.jpg','img3.jpg']).preload(); 

보인다 매력처럼 작동!