preload all backgorund изображения div

Question

Я использую xml для чтения всех тегов изображений для image-slider, я хочу загрузить все в основном они div с свойством background-image. Я хочу загрузить все фоновые изображения при загрузке страницы.

$.get('photos.xml', function(xml) { 
       $('item', xml).each(function (k) { 
        frontimg.push($(this).find('frontImg').text()); 
        frontText.push($(this).find('frontTxt').text()); 
        fTitle.push($(this).find('title').text()); 
        fCity.push($(this).find('city').text()); 
        fYear.push($(this).find('compYear').text()); 
        fLoc.push($(this).find('loc').text()); 
        fType.push($(this).find('type').text()); 
        fRole.push($(this).find('role').text()); 
        arrBackImg.push($(this).find('backImg').text());  
        backText.push($(this).find('backTxt').text()); 

        frontDiv.push("<h2>"+fTitle[k]+"</h2>"+ "<h3>"+fCity[k]+"</h3><hr><h4>YEAR OF COMPLETION</h4>"+fYear[k]+"<hr><h4>LOCATION</h4>"+fLoc[k]+"<hr><h4>PROPERTY TYPE</h4>"+fType[k]+"<hr><h4>MAPLETREE'S TYPE</h4>"+fRole[k]); 


        $('#myImageFlow').append('<div id="id'+k+'" alt="div'+k+'" class="sliderImage" width="300" height="350" style="visibility:hidden"> <div class="frontText" id="f'+k+'">'+frontDiv[k]+'</div><div class="borderdiv"></div><div class="reflection" id="ref'+k+'"></div> <div class="overlay"></div></div>'); 


       }); 
     }); 

как предварительно загрузить все фоновые изображения div.

Answer 1

попробовать это:

var $img = $('<img src="' + src + '">'); 
$img.bind('load', function(){ 
    $('.yourDiv').css('background-image', 'url(' + src + ')'); 
}); 
if($img[0].width){ $img.trigger('load'); }