Chrome and Safari browser jquery width () can not get the height problem

Summary of the problem:

Even if you want to traverse a group of pictures, you need to get the width when traversing. After the effect comes out, there is no problem with IE and Firefox, but Chrome and Safari will not get the picture width. In the past, it was basically IE incompatibility. Now, Chrome and Safari are incompatible. It feels strange, so write it out and share it.

Note: Before modifying the code, directly use $(ele).width() to get the width of the picture. Involved code:

  
   
   

    
    
$(function(){
      
      
    
    
	... //此处省略N行
    
    
	var w = $(this).width();
    
    
	... //此处省略N行	
    
    
});
   
   

After analysis, it is found that Chrome and Safari must have the picture not fully loaded yet, so they went to get the width of the picture. If the width is 0, there must be an error.

Solution:

1. Don't use "$(document.ready(function(){...})" or its short form "$(function(){...}), use $(window).load(function(){}); code Rewrite as follows:

  
   
   

    
    
$(window).load(function(){
      
      
    
    
	... //此处省略N行
    
    
	var w = $(this).width();
    
    
	... //此处省略N行	
    
    
});
   
   

Second, use the Image object and its onload method

  
   
   

    
    
$(function(){
      
      
    
    
	... //此处省略N行
    
    
	var that = $(this);
    
    
	var img = new Image();
    
    
	img.src = $(this).attr("src");
    
    
	img.onload = function(){
      
      
    
    
		var w = img.width;
    
    
	}
    
    
	... //此处省略N行	
    
    
});
   
   

Lastly, get the height and use $(ele).height() to get this problem under Chrome and Safari.

Source: