Javascript JQuery：加载事件如何处理图像？_Javascript_Jquery

Javascript JQuery：加载事件如何处理图像？

javascript jquery

Javascript JQuery：加载事件如何处理图像？,javascript,jquery,Javascript,Jquery,我对以下代码有问题： <!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

我对以下代码有问题：

<!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>


var html=“”；
var成像器=[
"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" ];
对于（var i=0；i


我使用最新版本的JQuery和最新版本的Google Chrome（MacOS Sierra）。我试图使JQuery的load事件工作，但在控制台中我什么也得不到。代码有什么问题吗？
试试这个；）
在将事件添加到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());
    });
});

for（变量i=0；i
试试这个；）
在将事件添加到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());
    });
});

for（变量i=0；i
这是因为当您附加事件时，img标记在dom**上，而不是在dom上，在前面的注释中键入。这是因为当您附加事件时，img标记在dom**上，而不是在dom上，在前面的注释中键入。真管用！但是我不明白它是怎么工作的：）你能用简短的话给我解释一下吗？“$（function（）{”？它什么时候调用？这是$（function（）{…}）；
是$（document.ready（function（）{…}）
；所以，基本上我们在一次调用中使用类选择器将事件绑定到图像；@JavaRunner您仍然有疑问吗？听起来不错：）但是为什么“加载”呢与img类关联的事件？我的意思是…类我认为它只是一个类，它不应该有任何关于何时加载图像的信息。为什么加载图像时会调用加载事件？jQuery绑定load
事件和.sizeAfterLoad
选择的元素；这个事件会在浏览器加载图像时立即触发嗯，行得通！但我不明白它是怎么工作的：）你能用简短的话解释一下吗？“$（function（）{”是什么意思？它什么时候调用？这个$（function（）{…}；
是$（document.ready（function（）{…}）的缩写形式
；因此，我们基本上是在一次调用中使用类选择器将事件绑定到图像；@JavaRunner您仍然有疑问吗？听起来不错：）但是为什么“加载”与img类关联的事件？我的意思是…类我认为它只是一个类，它不应该有任何关于何时加载图像的信息。为什么加载图像时会调用加载事件？jQuery绑定load
事件和.sizeAfterLoad
选择的元素；这个事件会在浏览器加载图像时立即触发;