jQuery：加載事件如何處理圖像？

Question

我的以下代碼有問題：

<!DOCTYPE html>
<html>
<head>
    <style>
    </style>
    <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 i = 0; i < imagesArr.length; i++ ) {

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

    $( "#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 );

</script>

</body>
</html>

我使用最新版本的JQuery和最新版本的Google Chrome（MacOS Sierra）。 我試圖使JQuery的load事件起作用，但是在控制台中什么也沒得到。 代碼有什么問題？

Answer 1

嘗試這個 ;）

您將事件綁定到圖像，然后再將它們添加到DOM ；

for (var i = 0; i < imagesArr.length; i++) {
    html += "<div><img class="sizeAfterLoad" src=\"" + imagesArr[ i ] + "\" id=\"img_" + i + "\"></div>";
}

$("#container").html(html);
$(function(){
    $(".sizeAfterLoad").off('load').on('load', function() {
        console.log("#" + $(this).attr('id')  + " is loaded! Its size is: " + $(this).width() + "x" + $(this).height());
    });
});

jQuery：加載事件如何處理圖像？

問題描述

1 個解決方案

解決方案1
2 已采納 2016-12-11 05:49:05

jQuery：加載事件如何處理圖像？

問題描述

1 個解決方案

解決方案1 2 已采納 2016-12-11 05:49:05

解決方案1
2 已采納 2016-12-11 05:49:05