Question

a nice member helped me preload a css background image, and I thought I would expand on that to preload more background images, however when I tried making a demo I ran into problems.

This is the original:

var  src = 'image1.jpg'
  , $img = $( '<img src="' + src + '">' );

$img.bind( 'load', function(){
    $( '#SomeDiv' ).css( 'background-image', 'url( ' + src + ')' );
    //more code here



} );
if( $img[0].width ){ $img.trigger( 'load' ); }

And this is what I did:

var  src1 = 'image1.jpg'
  , $img1 = $( '<img src="' + src1 + '">' );

var  src2 = 'image2.jpg'
  , $img2 = $( '<img src="' + src2 + '">' );

$img1.bind( 'load', function(){
    $( '#SomeDiv' ).css( 'background-image', 'url( ' + src1 + ')' );
    //more code here
} );

$img2.bind( 'load', function(){
    $( '#AnotherDiv' ).css( 'background-image', 'url( ' + src2 + ')' );
    //more code here
} );


if( $img[0].width ){ $img.trigger( 'load' ); }

Here’s a ‘working’ example:
http://jsfiddle.net/pufamuf/k2Ycv/

Thanks for the help everyone :))

Answer 1

Original:

if( $img[0].width ){ $img.trigger( 'load' ); }

Should be:

if( $img1[0].width ){ $img1.trigger( 'load' ); }
if( $img2[0].width ){ $img2.trigger( 'load' ); }