Javascript Google Chrome在加载期间错误地报告了图像的宽度和高度

在加载期间或加载之后错误地报告图像的宽度和高度值。在本代码示例中使用：

<img id='image01' alt='picture that is 145x134' src='/images/picture.jpg' />

<script>
 var img = $( 'img#image01' )

 img.width() // would return 145 in Firefox and 0 in Chrome.
 img.height() // would return 134 in Firefox and 0 in Chrome.
</script>

此外，如果在img标记中指定宽度和高度值，则脚本在和中的工作方式似乎与预期的一样

---

但是，由于您不能始终控制html输入，因此这不是一个理想的解决方法。可以用更好的解决方法修补此问题吗？或者我需要为代码中的每个图像指定宽度和高度吗？

这不是错误。在加载图像之前，

img

元素的宽度为0x0。您应该等待图像完全加载。试着这样做：

$("img#image01").load(function(){
  //do things here
});

$(document).ready(function() {
    var img, imgElement;

    // Find the image
    img = $("#theimage");
    imgElement = img[0];
    if (imgElement && imgElement.complete) {
        // Already loaded, call the handler directly
        loadHandler.call(imgElement);
    }
    else {
        // Not loaded yet, hook the event
        img.bind('load', loadHandler);
    }

    function loadHandler() {
        var img = $(this);
        log("Width: " + img.width());
        log("Height: " + img.height());
        img.unbind('load', loadHandler);
    }
});

---

你有没有试着把代码放进

$(document).ready(function(){
});

如果这没有帮助，请使用jQuerys函数

---

您引用的代码内联执行该操作得到了合理的结果，因为在代码执行之前可能不会加载图像。你说你把它放在一个

onload

处理程序中，结果也是一样的。你真的是指一个

onload

处理程序吗？因为我无法复制这个结果。请注意，jQuery

ready

函数不是一个

onload

处理程序，它发生的时间要早得多。要确保图像已加载，请使用图像的

加载

事件或

窗口

加载

事件。jQuery

ready

发生的时间要早得多

因此，这应该是可行的：

$(window).bind('load', function() {
    var img = $("#theimage");
    log("Width: " + img.width());
    log("Height: " + img.height());
});

$(document).ready(function() {
    $("#theimage").bind('load', function() { // BUT SEE NOTE BELOW
        var img = $(this);
        log("Width: " + img.width());
        log("Height: " + img.height());
    });
});

…（其中，

log

是输出到页面的内容），这应该可以工作：

$(window).bind('load', function() {
    var img = $("#theimage");
    log("Width: " + img.width());
    log("Height: " + img.height());
});

$(document).ready(function() {
    $("#theimage").bind('load', function() { // BUT SEE NOTE BELOW
        var img = $(this);
        log("Width: " + img.width());
        log("Height: " + img.height());
    });
});

……但这不会：

$(document).ready(function() {
    var img = $("#theimage");
    log("Width: " + img.width());
    log("Height: " + img.height());
});

…因为它发生得太快了

编辑：我真的，真的应该在上面说：如果您正在查看图像的

加载

事件（而不是

窗口

加载事件），您需要检查以确保图像尚未加载，因为其

加载

事件可能已经触发。看起来是这样的：

$("img#image01").load(function(){
  //do things here
});

$(document).ready(function() {
    var img, imgElement;

    // Find the image
    img = $("#theimage");
    imgElement = img[0];
    if (imgElement && imgElement.complete) {
        // Already loaded, call the handler directly
        loadHandler.call(imgElement);
    }
    else {
        // Not loaded yet, hook the event
        img.bind('load', loadHandler);
    }

    function loadHandler() {
        var img = $(this);
        log("Width: " + img.width());
        log("Height: " + img.height());
        img.unbind('load', loadHandler);
    }
});

这将尽早调用

loadHandler

，无论图像加载赢得了比赛还是

ready

code赢得了比赛

$('#img2').show(function() {
    if( $.browser.safari ){
      alert ( $('#img2').width() );
    }
});

---

.load不适用于Chrome维度，因此请使用.show；）

嗯。。。我认为jquery的$（function（）{/*code*/}）是一个onload。。。你每天都在学习新的东西，但为什么chrome和FF在这方面有所不同？@Stefan：如果你在加载事件触发之前就这么做，这是一种竞争条件，结果往往不会确定。很可能Chrome的V8 JavaScript引擎就是这么快（速度太快了。）在这里，我恨chrome的速度太快了something@Stefan：我刚刚在最初应该包含的答案中添加了一些内容：如果使用图像的

load

事件，您需要确保首先检查图像元素上的

complete

标志，以确保它已经加载（例如，确保它没有赢得比赛）。这就是赞助标签的用途！