加载时jQuery width（）不正确

Question

当我加载页面并使用$('div.logo').width()时，它会返回大量值6500，这是不正确的。图像宽度仅为130像素。

但是，如果我使用setTimeout并在几秒钟后检查$('div.logo').width()，则返回正确的宽度。

为什么会这样？我的所有CSS都应该已经加载了，为什么几秒钟的停顿会产生影响呢？

Answer 1

您必须在加载图像后检查图像宽度。

所以：

// NOTE: not $(document).ready
$(window).load(function() {
  var width = $('.logo img').width();
});

或

$('.logo img').load(function() {
  var width = $(this).width();
});

应该给出正确的宽度。

Answer 2

将width和height属性设置为图像。您也可以在CSS中指定大小。然后浏览器将知道图像加载前的大小。

Answer 3

那是因为尚未加载图像，所以初始大小基于CSS或猜测。您可以使用：

$('.logo img').load(function() {
  var width = $(this).width();
});

Answer 4

图片正在加载GET方法， 所以你需要在之后检查，

$('.logo img').load(function(){
  //your code
});

如果您希望图像立即加载，您可以使用BASE64图像。 有关详细信息Plase see here

Answer 5

它可以是javascript修改页面的布局，例如它可以是页面底部包含的脚本标签，或者在JQuery就绪或加载事件上执行的任何其他javascript代码。例如，如果此代码附加html代码，则会影响您.logo div。

的宽度

另一种可能性是你的html不正确，要检查这只是运行任何HTML验证器，如http://www.freeformatter.com/html-validator.html。从页面中获取HTML进行验证时，请注意某些浏览器会修复不正确的HTML，因此最好从源代码中获取它。