谷歌浏览器再次做错了事 [英] Google Chrome is doing things wrong again

问题描述

和 Chrome 。

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

但是，因为您无法始终控制html输入，所以这不是理想的解决方法。可以 jQuery 针对此问题采用更好的解决方法进行修补？或者是否需要为我的代码中的每个图像指定宽度和高度？

所引用的内联代码会获得合理的结果，因为在执行代码之前图像可能不会被加载。你说你把它放在 onload 处理程序中，并且它也有相同的结果。你真的是指一个 onload 处理程序吗？因为我无法复制那个结果。请注意，jQuery ready 函数是不是和 onload 处理函数，它发生得比那。为了确保加载图片，请使用图片的加载事件或窗口 加载事件。 jQuery ready 发生在此之前。

所以这应该是工作的：

  $（window）.bind（'load'，function（）{
 var img = $（＃theimage）; 
 log（Width：+ img.width（））; 
 log（Height：+ img.height（））; 
}）; 
  

...（其中 log 输出到页面），这应该工作：

  $（document）.ready（function（）{
 $（＃theimage）。bind（'load'，function（）{//但请参阅以下注释
 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（））; 
}）; 
  

...因为它发生的太快。

编辑：我确实应该在上面说过：如果您正在查看图片的 加载事件（而不是窗口加载事件），您需要检查以确保图像尚未加载，因为它的 load 事件可能已经被触发。这看起来像这样：

  $（document）.ready（function（）{
 var img，imgElement ; 
 
 //找到图片
 img = $（＃theimage）; 
 imgElement = img [0]; 
 if（imgElement&& imgElement.complete）{
 //已加载，直接调用处理程序
 loadHandler.call（imgElement）; 
} 
 else {
 //尚未加载，挂钩事件
 img.bind（'load'，loadHandler）; 
} 
 
函数loadHandler（）{
 var img = $（this）; 
 log（Width：+ img.width（））; 
 log（Height：+ img.height（））; 
 img.unbind（'load'，loadHandler）; 
} 
}）; 
  

这会尽早调用 loadHandler ，图片加载是否赢得比赛或准备好代码赢得了比赛。

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>

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>

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

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?

解决方案

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.

So this should work:

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

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

...but this will not:

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

...because it happens too soon.

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

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

这篇关于谷歌浏览器再次做错了事的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！