2013-06-25 142 views
2

我正在使用xml读取图像滑块的所有图像标记,我想要加载所有基本上它们都是背景图像属性的div。我想加载页面加载所有背景图像。预加载div的所有backgorund图像

$.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的所有背景图片。

+0

http://stackoverflow.com/questions/476679/preloading-images-with-jquery?rq=1 – Andreas

+0

@Andreas我没有的img标签 – anam

回答

0

试试这个:

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