Community Learn Tools Library Leisure
search
English
Home > Web Front-end > JS Tutorial > Regarding the problem of using Jquery's height() and width() to calculate the width and height of dynamically inserted IMG tags_jquery

Regarding the problem of using Jquery's height() and width() to calculate the width and height of dynamically inserted IMG tags_jquery

WBOY
Release： 2016-05-16 18:14:14
Original
1593 people have browsed it

Let’s look at the phenomenon first:

Copy code The code is as follows:


<script> <br>$(document).ready(function() { <br>$("#cc").append("<div id='aa ' style='width:200px;height:200px;' /></div>"); <br>alert($("#aa").width()); <br>}); <br></script>

The result is: 200
All browsers get the correct result

Change the inserted element to IMG
Copy code The code is as follows:


< ;script>
$(document).ready(function() {
$("#cc").append("");
alert($("#aa").width());
});


(Note: the actual width of image1.jpg is 693)

The result is:
Opera:34
Firefox:0
IE:28
Chrome:0
Safari:0

Refresh with F5, the result is:
Firefox:693
IE:693
Opera:693
Chrome:0
Safari:0
Safari and Chrome are always 0.

It should be understood that the width and height of the image calculated when the image is not loaded or rendered is incorrect. There should be a cache after refreshing, so the result is correct, but why Chrome

and Safari are always 0? Moreover, IE and OPERA actually calculated an error value at the beginning.
Change it to the following:
Copy the code The code is as follows:


<script> <br>$(document).ready(function() { <br>$("#cc").append(" <img id='aa' src='http://www.jb51.net/images/logo.gif' />"); <br>window.setTimeout(function(){alert($("# aa").width()); },100); <br>}); <br></script>

Have you ever solved this problem or have more details about this problem? If you know Big Bird, please give me some advice.
Copy code The code is as follows:

$( document).ready(function() {
$("#cc").append("");
$("#aa").load( function(){
alert($("#aa").width()
}).attr("src", "http://www.jb51.net/images/logo.gif") ;
});
Related labels：
Label
source：php.cn
Previous article：The story after adding disabled to the hyperlink_javascript skills Next article：Teach you how to remove the IE web page loading progress bar_javascript skills
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
Dynamically modify inline CSS styles in Javafx I'm trying to change the background image of a pane when the application is maximized. My ...
From 2024-04-06 20:57:16
0
1
487
Problems encountered when using opentbs to generate odt files: values ​​of the same key are displayed in the same row instead of separate columns. I'm using a library called OpenTbs to create odt using PHP, I'm using it because columns a...
From 2024-04-06 20:18:18
0
1
483
CSS only method to dynamically modify image src on click without using JavaScript I need to change the src of an image on mouse click using only css like img:active{}
From 2024-04-06 19:25:49
0
1
505
Status update not working in React-Native on Android I have some code that has pairs of images in a swipeable horizontal gallery. Now when you ...
From 2024-04-06 16:54:10
0
1
410
The execution order of VueJS scheduling functions causes problems I'm trying to display a list of announcements (retrieved from API) on a page. I'm using a ...
From 2024-04-06 10:37:58
0
1
385
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template