jquery - 如果未设置 css 属性，则无法检索图像宽度

Question

在除 firefox 之外的所有浏览器上，如果未设置 css 属性，似乎无法检索图像宽度，我尝试了找到的所有代码但无法解决此问题，这是 Html 代码

<div class="slide"><img src="../images/image1.jpg"/></div>
<div class="slide"><img src="../images/image2.jpg"/></div>
<div class="slide"><img src="../images/image3.jpg"/></div>

和 Javascript

    var slideWidth = parseInt($('.slide').find('img:first').css('width'));
    alert(slideWidth);      //Works on FF but not Other browsers 
    var slideWidth = $('.slide').children('div > img:first').width();
    alert(slideWidth);        //Works on FF but not Other browsers 

警报会在 FF 上显示正确的宽度，但在其他人上会显示 0 有没有办法解决这个问题，谢谢..

这里有一个例子：

http://jsfiddle.net/j82s6/

Answer 1

您忘记等待图像首先加载 - 其他浏览器正在检索图像加载之前的宽度。使用.load()事件。

小提琴： http: //jsfiddle.net/M6TxJ/
JS：

$('.slide img:first').load(function(){
    var slideWidth = parseInt($('.slide').find('img:first').css('width'));
    alert(slideWidth);      //Works on FF but not Other browsers 
    var slideWidth = $('.slide').children('div > img:first').width();
    alert(slideWidth);

});

Answer 2

如果您onLoad在 jsfiddle 中选择选项（我使用的是 Chrome），您的代码可以正常工作。

http://jsfiddle.net/j82s6/4/

确保将代码放入其中

$(document).ready(function{
  // your code
});