JQuery:如何在加载映像事件中准备工作文档？
我试图得到图像的宽度和它的高度，当它被加载。我是这样做的：
<!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为什么load事件只在第一次工作？
回答 1
Stack Overflow用户
发布于 2016-12-11 13:00:59
如果我没有错，那么您希望在加载图像之后显示图像的大小。
你可以试试这个：
$( 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');
});
} );
您可以看到这个答案的实际帖子：related post
在应用更改后，我已经附加了控制台输出。
准备好了#img_0，sf.html:30准备好了，#img_1准备好了，sf.html:30准备好了#img_2 sf.html:32 #img_0被加载了！它的大小是: 256x256 sf.html:32 #img_1被加载！它的大小是: 256x256 sf.html:32 #img_2被加载！它的大小是: 256x256 sf.html:30 #img_0 sf.html:32 #img_0被加载！它的大小是: 256x256 sf.html:30 #img_1 sf.html:32 #img_1被加载！它的大小是: 256x256 sf.html:30 #img_2 sf.html:32 #img_2被加载！它的大小是: 256x256 sf.html:30 #img_0 sf.html:32 #img_0被加载！它的大小是: 256x256 sf.html:30 #img_1 sf.html:32 #img_1被加载！它的大小是: 256x256 sf.html:30 #img_2 sf.html:32 #img_2被加载！它的大小是: 256x256 sf.html:30，#img_0准备，sf.html:30，#img_1，sf.html:30，#img_2，sf.html:32，#img_0是加载的！它的大小是: 256x256 sf.html:32 #img_1被加载！它的大小是: 256x256 sf.html:32 #img_2被加载！它的大小是: 256x256 sf.html:30 #img_0 sf.html:32 #img_0被加载！它的大小是: 256x256 sf.html:30 #img_1 sf.html:32 #img_1被加载！它的大小是: 256x256 sf.html:30 #img_2 sf.html:32 #img_2被加载！它的尺寸是:256 x 256。
https://stackoverflow.com/questions/41086061
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号