Community Learn Tools Library Leisure
search
English
Home > Web Front-end > JS Tutorial > The correct way to get the size of dynamically loaded images in JQ_jquery

The correct way to get the size of dynamically loaded images in JQ_jquery

WBOY
Release： 2016-05-16 17:16:41
Original
1748 people have browsed it

There are some error-prone methods of obtaining the size of dynamically loaded images. The main reasons for errors are:
You call the code before the image is downloaded from the web page. In this case, It is not easy to find when developing on the machine.
The BUG of jQuery load() event processing. When the image is obtained from the browser cache, the wrong size is obtained.
The wrong code is:
(Error ) Call the code to get the dimensions immediately after adding the HTML

Copy code The code is as follows:

　var html = '';
　$(' #my_div').html(html);
　var width = $('#my_div img').width(); // may return 0

(Error) Use jQuery’s load() event handling

Copy code The code is as follows:

var html = '';
var img = $(html);
　html.load(function(){
　// return 0 if image is loaded from browser cache
　var width = img.width();
　});
　$('#my_div').html(img);

The following is the truly correct method, using the JavaScript Image class:
Correct method

Copy code The code is as follows:

var html = '';
$('#my_div').html(html);
var ni = new Image();
ni .onload = function(){
　var width = ni.width;
　}
　ni.src = img.attr(URL);
Related labels：
dynamic loading Image size
source：php.cn
Previous article：Native JS draggable pop-up effect example code_javascript skills Next article：Use JS to highlight the search keywords and implement the code_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
function_exists() cannot determine the custom function Function test () {return true;} if (function_exists ('test')) {echo "test is function...
From 2024-04-29 11:01:01
0
3
2252
How to display the mobile version of Google Chrome Hello teacher, how can I change Google Chrome into a mobile version?
From 2024-04-23 00:22:19
0
11
2389
The child window operates the parent window, but the output does not respond. The first two sentences are executable, but the last sentence cannot be implemented.
From 2024-04-19 15:37:47
0
1
2004
There is no output in the parent window document.onclick = function(){ window.opener.document.write('I am the output of the child ...
From 2024-04-18 23:52:34
0
1
1890
Where is the courseware about CSS mind mapping? Courseware
From 2024-04-16 10:10:18
0
0
1956
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