jQuery load function - invisible images

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.

Any CSS rules applied to `.icon` should immediately appear with the element. My guess is that the CSS selector is incorrect, or being overriden. — Rory McCrossan, Sep 10 '12 at 15:11
`.load` is not only deprecated, but it doesn't work very well for firing on image loads. — Explosion Pills, Sep 10 '12 at 15:11
Not related to your problem, but possibly to a future problem: "Depending on the browser, the load event may not trigger if the image is cached (Firefox and IE)." - http://www.w3schools.com/jquery/event_load.asp — Tom Prats, Sep 10 '12 at 15:12
@RoryMcCrossan Without load() function everything works fine, so it must be problem with that function. — user1409508, Sep 10 '12 at 15:15
Saying what @TMP but with a more reliable source, "It (`load event`) doesn't work consistently nor reliably cross-browser; [...] Can cease to fire for images that already live in the browser's cache" - http://api.jquery.com/load-event/ — Fabrício Matté, Sep 10 '12 at 15:15
@FabrícioMatté agreed, but user1409508 if you post more code we could help you find a work around — Tom Prats, Sep 10 '12 at 15:18
I've seen a script that detects when the image has loaded and also checks for cache not too long ago, but can't seem to find it. — Fabrício Matté, Sep 10 '12 at 15:23
@FabrícioMatté Thanks for link, I tried it but it didn't help to fix issue. I updated my first post, now it's almost full code — user1409508, Sep 10 '12 at 15:49

pdoherty926 · Accepted Answer · 2012-09-10T16:32:57.360

0

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';

edited Sep 10 '12 at 16:32

answered Sep 10 '12 at 16:26

pdoherty926

9,895
4
37
68

jQuery load function - invisible images

1 Answers1