CODEWITHSUNDEEP
javascriptjquery
JavaRunner
JavaRunner

Reputation: 2545

JQuery: How does work document ready with the load image event?

I try to get image's width and its height when it's loaded. I do it this way:

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>

<div id="container"></div>

<script>

var html = "";
var imagesArr = [ 
    "https://2.bp.blogspot.com/-RHUhIkxWXfM/V0knRDiexII/AAAAAAAAAok/gBHYhd4KheAlaPX_LF6rDHkPZ9B4YS6VACLcB/s1600/napolo%2B25%2Bjp.jpg",
    "https://4.bp.blogspot.com/-0rDtgu8yH2A/V0knhAVCgyI/AAAAAAAAAoo/zwno2cyB50UKWAlPM41zL--o7OrAKCWHQCLcB/s1600/nike%2B25jp.jpg",
    "https://4.bp.blogspot.com/-_w5bgf-rTag/V0knJckJ6II/AAAAAAAAAog/NgHKMdhlCCw9his5PGPhPcFRRdwDzTgXACLcB/s1600/jordan25jp.jpg" ];

for ( var n = 0; n < 5; n++ ) {

    setTimeout( function() {

        // Next try:
        $( "#container" ).html( "" );

        for ( let i = 0; i < imagesArr.length; i++ ) {

            html += "<div><img src=\"" + imagesArr[ i ] + "\" id=\"img_" + i + "\" class=\"sizeAfterLoad\"></div>";

            $( document ).ready( function() {
                console.log( "ready for #img_" + i );
                $( "#img_" + i ).off( "load" ).on( "load", function() {
                    console.log( "#img_" + i + " is loaded! Its size is: " + $( "#img_" + i ).width() + "x" + $( "#img_" + i ).height() );
                } );
            } );

        }

        $( "#container" ).html( html );

    }, n * 1000 );

}
</script>

</body>
</html>

It works fine but only for the first time. The second try fails. In the console I get:

ready for #img_0
test7.html:48 ready for #img_1
test7.html:48 ready for #img_2
test7.html:50 #img_0 is loaded! Its size is: 256x256
test7.html:50 #img_1 is loaded! Its size is: 256x256
test7.html:50 #img_2 is loaded! Its size is: 256x256
test7.html:48 ready for #img_0
test7.html:48 ready for #img_1
test7.html:48 ready for #img_2
test7.html:48 ready for #img_0
test7.html:48 ready for #img_1
test7.html:48 ready for #img_2
test7.html:48 ready for #img_0
test7.html:48 ready for #img_1
test7.html:48 ready for #img_2
test7.html:48 ready for #img_0
test7.html:48 ready for #img_1
test7.html:48 ready for #img_2

Why the load event works only for the first time?

Upvotes: 0

Views: 374

Answers (1)

cody
cody

Reputation: 132

If I am not wrong, then you want the size of the image to be shown after once image is loaded also.

you can try this:

$( document ).ready( function() {
     console.log( "ready for #img_" + i );
     $( "#img_" + i ).on( "unload").on( "load", function() {
         console.log( "#img_" + i + " is loaded! Its size is: " + $( "#img_" + i ).width() + "x" + $( "#img_" + i ).height() );
        } ).each(function() {
              if (this.complete) $(this).trigger('load');
        });
} );

You can see the actual post here for this answer: related post
I have attached the console output after applying changes. 

 ready for #img_0
    sf.html:30 ready for #img_1
    sf.html:30 ready for #img_2
    sf.html:32 #img_0 is loaded! Its size is: 256x256
    sf.html:32 #img_1 is loaded! Its size is: 256x256
    sf.html:32 #img_2 is loaded! Its size is: 256x256
    sf.html:30 ready for #img_0
    sf.html:32 #img_0 is loaded! Its size is: 256x256
    sf.html:30 ready for #img_1
    sf.html:32 #img_1 is loaded! Its size is: 256x256
    sf.html:30 ready for #img_2
    sf.html:32 #img_2 is loaded! Its size is: 256x256
    sf.html:30 ready for #img_0
    sf.html:32 #img_0 is loaded! Its size is: 256x256
    sf.html:30 ready for #img_1
    sf.html:32 #img_1 is loaded! Its size is: 256x256
    sf.html:30 ready for #img_2
    sf.html:32 #img_2 is loaded! Its size is: 256x256
    sf.html:30 ready for #img_0
    sf.html:30 ready for #img_1
    sf.html:30 ready for #img_2
    sf.html:32 #img_0 is loaded! Its size is: 256x256
    sf.html:32 #img_1 is loaded! Its size is: 256x256
    sf.html:32 #img_2 is loaded! Its size is: 256x256
    sf.html:30 ready for #img_0
    sf.html:32 #img_0 is loaded! Its size is: 256x256
    sf.html:30 ready for #img_1
    sf.html:32 #img_1 is loaded! Its size is: 256x256
    sf.html:30 ready for #img_2
    sf.html:32 #img_2 is loaded! Its size is: 256x256

Upvotes: 1

Related Questions