Question

我尝试在加载图像时获得图像的宽度和高度。我是这样做的：

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

它工作正常但仅限第一次。第二次尝试失败了。在控制台中我得到：

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

为什么加载事件仅适用于第一次？

Answer 1

如果我没错，那么您希望在加载图像后显示图像的大小。

你可以试试这个：

＆＃13;

$( 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');
        });
} );

＆＃13;

您可以在此处查看此答案的实际帖子： related post
我在应用更改后附加了控制台输出。

 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

JQuery：如何使用load image事件准备好工作文档？

1 个答案: