Question

Im using load() function to check if image is loaded. If is, then I’m using 2 other functions.
Code looks like this:

$('#img-1').load(function(){        
     someFunction1();
     loadIcons();       
});

someFunction1() works fine, but loadIcons() has class, which has declared background-image in CSS file and this image is invisible(like it wasn’t loaded yet)

loadIcons():

function loadIcons(){
        $('#gallery').append('<div class="icon" id="icon-1">');
        $('#icon-1').append('<span></span>');
        $('#icon-1').css({
            'top': parseInt(top),
            'left': parseInt(left)
        });
}

These elements (div, span) are visible in Firebug, but image from .icon class is invisible. Any idea how to fix it?

    $(document).ready(function(){

    someFunction1()
    {       
            $('#spinner').remove();
            $('#spinner-transparent').css({
                'opacity' : 0
            });
    }

    function loadIcons()
    {
        //code above
    }


    $('#img-1').one('load', function(){     
          someFunction1();
          loadIcons();       
        }).each(function() {
  if(this.complete) $(this).load();
});

Note: spinner is a <div> with loading .gif inside.

Answer 1

I once had trouble with $.load and ended up doing something like this instead:

var img_load_callback = function () {...};
var img = new Image();
img.onload = img_load_callback; // this must be set before img.src
img.src = 'whatever.jpg';