JQuery: How does load event work for images?
<p>I have a problem with the following code:</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;style&gt;
    &lt;/style&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;div id="container"&gt;&lt;/div&gt;

&lt;script&gt;

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 i = 0; i &lt; imagesArr.length; i++ ) {

    html += "&lt;div&gt;&lt;img src=\"" + imagesArr[ i ] + "\" id=\"img_" + i + "\"&gt;&lt;/div&gt;";

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

}

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

&lt;/script&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>I use the latest version of JQuery and the latest version of Google Chrome (MacOS Sierra). I try to make JQuery's load event work but in my console I get nothing. What's the problem with the code?</p>