JS - Canvas Image in not working well in chrome ( or how to wait for an image to load properly )

Question

I have a script that draws a QR code with an Image on canvas .

It is using a plugin, and normally - everything works great - but not in chrome .

HTML

<img id="#o99-qrs-img-buffer" src="http://localhost/www.beta.com/logo1.png" 
    style="display:none">
<div id="o99_qrcode" class="code"></div>

JS script is as follows ( ignore the PHP part - it is working great ):

 jQuery(document).ready(function() {

    var options = {
        render: "'.$qr_render.'", // Canvas, Div ,Image 
        size: '.$qr_size.',
        radius: '.  ($qr_corner_r * 0.1) .',

        .... tons of other options....

        // Image Label -> the problem is here 
        image: jQuery("#o99-qrs-img-buffer")[0], // taken as example
    };

    jQuery("#o99_qrcode").empty().qrcode(options);
});

Like said , it is working great on all tested browsers - except in chrome - where it works sporadically . more fail than work. ( 90% - 10% )

Observing a bit , I have noticed two things :

1 - The jQuery(document).ready(function() is not really working as form my understaning of what it should be doing ( and my understanding might be wrong of course ) because the script is firing and displaying the image BEFORE the document is finished to load.

2 - I assume by observing that the script fails becuase ( related to 1 ) - the image is actually nowhere to be found when the script fires - so it has nowhere to take the source from ..

At the beginning I blamed the "display:none" and changed the div to style="width:100px;height:100px;" with jQuery("#o99-qrs-img-buffer").hide(); after the script firing .

No good .

then I tried to change the jQuery(document).ready to load and onLoad .

Still no go .

Reading a LOT of related question here on SE - I found 3 with the hint of my problem : HERE , HERE and HERE .

So I tried to implement the first one , which looked like a solid solution :

var imagetest = new Image();

imagetest.onload = function() { 
    // wrap the firing in a function only when the image loads
    jQuery("#o99_qrcode").empty().qrcode(options);
};
imagetest.src: jQuery("#o99-qrs-img-buffer")[0]; // taken as example

But chrome seems a lot more persistent than me ...

Either I am implementing the solution totally wrong ( very possible ) or I am so unfamiliar with JS that I do not understand the problem at the first place .

The fact that the script working with a plugin seems irrelevant because the plugin works great on all browsers (and sometimes chrome too ..)

At any rate , I need help In finding a way to load the Image and be sure it is loaded before the script fires ...

Answer 1

$(document).ready() is fired, when DOM is fully loaded. In practice this happens at the time when parser have just met </body> . This doesn't mean that the page would be ready/fully loaded, content of external resources like iframe s or img might still be loading. $(document).ready() only guarantees you can refer all elements within the HTML.

If you want to wait untill the whole page and all its resources have been completely loaded, you need to use $(window).load() .

Also looks like document never triggers load event, $(document).onLoad() doesn't exist.