An example of how img loading affects height of in chrome

2020-03-30 03:07:14
OfStack

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>chrome Under the img Load on the height() The influence of </title> 
<style type="text/css"> 
.floatleft { 
float:left; 
} 
</style> 
<script type="text/javascript" src="js/jQuery-1.7.1.js"></script> 
<script type="text/javascript"> 
$(function() { 
var img_h = $('.showimg').height(); 
var img_w = $('.showimg').width(); 
var text_h = $('.showtext').height(); 
$('.showresult').html('showImg:' + img_w + '&' + img_h + '<br />showText:' + text_h); 
alert('showImg:' + img_w + '&' + img_h + '<br />showText:' + text_h); 
}); 
</script> 
</head> 
<!-- 
 Author: Beijing - The nangongshan  
 Date: 2012-07-25 
--> 
<body> 
<div class="floatleft"> 
<div class="showimg"> 
<img src="images/flash_pic.gif" /> 
</div> 
<div class="showtext"> 
 This is the written word  
</div> 
<div class="showresult"> 
 The results are shown here.  
</div> 
</div> 
</body> 
</html>

Run this code in chrome, and when the alert window pops up, you will find that the img of the page is not loaded.

The operation results are as follows:

This is the written word
ShowImg: 112 and 0
ShowText: 18

1. The default width of img here is 112, but the width of img I linked is 1000.

2. The height of img here is 0,

The following changes are made

 
<img src="images/flash_pic.gif" width="1000" />

The running result is:

This is the written word
ShowImg: 1000 and 0
ShowText: 18
The height of img is still zero

After setting the height for it, it can be retrieved normally.

Conclusion: in chrome, img is not set to width and height, and the img obtained from jquery's width() and height() will be 112px by 0

Help: hope which warrior has a good way to get the right value without setting the width and height.