jquery - 预加载 div 的所有背景图像

Question

我正在使用 xml 读取图像 slider 的所有图像标签，我想加载所有基本上它们是具有背景图像属性的 div。我想在页面加载时加载所有背景图像。

$.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' ); }