Google Chrome浏览器在加载过程中错误地报告了图像的宽度和高度 [英] Google Chrome incorrectly reporting width and height for images during load

问题描述

Chrome 错误报告了宽度和高度在加载期间或加载之后的图像值.在此代码示例中使用了 jQuery :

Chrome is wrongly reporting width and height values for images during, or just after, load time. Jquery is used in this code example:

<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>

如果将脚本放在$(function(){})函数中，则结果是相同的.但是如果您在页面加载后几秒钟运行代码，则 chrome 会返回正确的结果.

If you put the script in a $(function(){}) function, the result is the same. but if you run the code a few seconds after the page has loaded, chrome returns the correct result.

<script>
  function example () {
    var img = $( 'img#image01' );

    img.width() // returns 145 in both Firefox and Chrome.
    img.height() // returns 134 in both Firefox and Chrome.
  }
  window.setTimeout( example, 1000 )
</script>

此外，如果您在 img 标签中指定 width 和 height 值，则该脚本似乎在 Firefox 和

Also if you specify the width and height values in the img tag, the script seems to work as expected in both Firefox and Chrome.

<img id='image01' src='/images/picture.jpg' width=145 height=134 />

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

But as you cannot always control the html input, this is not an ideal workaround. Can jQuery be patched with a better workaround for this problem? or will I need to specify the width and height for every image in my code?

推荐答案

您内联引用的代码取得了合理的结果，因为在执行代码之前可能无法加载该图像.您说过将其放在onload处理程序中，结果也相同.您真的是说onload处理程序吗?因为我无法复制该结果.请注意，jQuery ready函数不是一个onload处理程序，它发生的时间要早​​得多.要确保已加载图像，请使用图像的load事件或window load事件. jQuery ready发生的时间要早​​得多.

Your quoted code doing it inline is getting a reasonable result, as the image may well not be loaded before your code executes. You said that you put it in an onload handler and that also has the same result. Did you really mean an onload handler? Because I cannot replicate that result. Note that the jQuery ready function is not an onload handler, it happens much earlier than that. To ensure images are loaded, use the image's load event or the window load event. jQuery ready happens a lot earlier than that.

所以这应该起作用:

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

...(其中log是输出到页面的内容)，这应该可以工作:

...(where log is something that outputs to the page), and this should work:

$(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());
});

...因为它发生得太早了.

...because it happens too soon.

编辑:我确实应该在上面说过:如果您正在查看图片的 load事件(而不是window load事件) )，则需要检查以确保尚未加载图片，因为其load事件可能已经触发.看起来像这样:

Edit: I really, really should have said in the above: If you're looking the image's load event (rather than the window load event), you need to check to make sure the image hasn't already been loaded, because its load event may have already fired. That would look something like this:

$(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);
    }
});

无论图像加载赢得比赛还是ready代码赢得比赛，都将尽早调用loadHandler.

That will call loadHandler at the earliest opportunity, whether the image load won the race or the ready code won the race.

这篇关于Google Chrome浏览器在加载过程中错误地报告了图像的宽度和高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！