我尝试在加载图像时获取图像的宽度和高度。我这样做:
<!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
为什么加载事件只在第一次起作用？
最佳答案
如果我没记错的话，那么您希望在加载图像后也显示图像的大小。
你可以试试这个:
$( 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
我在应用更改后附加了控制台输出。
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
关于javascript - JQuery:如何通过加载图像事件准备工作文档？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41086061/