jQuery的。宽（）铬和Safari浏览器的问题 [英] jquery .width() chrome and safari problem

问题描述

我已将css中的图像高度设置为某个值，并且宽度会自动修改，以便保持宽高比。我使用.width（）jquery函数在css调整图像大小后获取图像的宽度。在Firefox和Internet Explorer中，这种方式很好，但在Chrome和Safari中，每个图像返回的宽度始终为0。我使用的代码如下：

  var total = 0; 
 var widthdiv = 0; 
 $（function（）{
 $（'。thumb'）。each（function（）{
 widthdiv = $（this）.width（）; 
 total + = widthdiv ; 
 alert（widthdiv）; //添加所以我可以看到返回的值是什么
}）; 
}）; 
  

和图片的css：

  #poze img {
 height：80px; 
 width：auto; 
 border：0px; 
 padding-right：4px; 
 
  

解决方案

> document.ready （您当前正在使用的）图片可能会或可能不会被加载，如果它们不在缓存中，它们可能不是 加载的。请使用 window.onload 事件当图像被加载时，像这样：

  var total = 0; 
 $（window）.load（function（）{
 $（'。thumb'）。each（function（）{
 total + = $（this）.width（）; 
}）; 
}）; 
  

I have set in css the height of an image to a certain value and the width modifies automatically so that the aspect ratio is preserved. I'm using the .width() jquery function to get the width of the image after the css resized the image. in Firefox and internet explorer this works great but in chrome and safari the width returned is always 0 for each image. the code that i am using is the following:

var total=0; 
var widthdiv=0;
$(function(){
    $('.thumb').each(function(){
       widthdiv=$(this).width();
       total+=widthdiv;
       alert(widthdiv); //added so i can see what value is returned.
    });
});

and the css for the images:

#poze img{
    height:80px;
    width:auto;
    border:0px;
    padding-right:4px;    
}

解决方案

In document.ready (which you're currently using) images may or may not be loaded, if they're not in cache they probably aren't loaded. Instead use the window.onload event when the images are loaded, like this:

var total=0; 
$(window).load(function() {
  $('.thumb').each(function() {
    total += $(this).width();
  });
});

这篇关于jQuery的。宽（）铬和Safari浏览器的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！