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" ""> 
<html xmlns=""> 
<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 { 
<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); 
 Author: Beijing - The nangongshan  
 Date: 2012-07-25 
<div class="floatleft"> 
<div class="showimg"> 
<img src="images/flash_pic.gif" /> 
<div class="showtext"> 
 This is the written word  
<div class="showresult"> 
 The results are shown here.  

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.

Related articles: