Google Chrome再次出错

Chrome错误地报告了宽度和高度加载时间期间或之后的图像值。 Jquery在这个代码示例中使用：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>

如果你把这个脚本在$(function(){})功能，结果是一样的。但是如果您在页面加载后几秒钟运行代码，则chrome会返回正确的结果。如果指定宽度和高度在IMG标签值

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

此外，脚本似乎有望在这两个Firefox和Chrome工作。

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

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

来源

2010-06-14 Stefan

现在这就是赞助标记是！ – beggs 2010-06-14 08:07:42

@beggs ...我不遵循？ – Stefan 2010-06-14 08:38:55

你引用的代码做内联正在获得合理的结果，因为在执行代码之前图像可能不会被加载。你说你把它放在onload处理程序中，并且也有相同的结果。你真的是指一个onload处理程序？因为我无法复制那个结果。请注意，jQuery ready函数是而不是和onload处理函数，它发生得比这更早。要确保加载图像，请使用图像的load事件或windowload事件。 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() { // 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()); 
});

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

编辑：我真的，真的应该在上面说：如果你正在寻找的图像的load事件（而不是window load事件），则需要检查，以确保图像不是招” t已经被加载，因为它的load事件可能已经被触发。这将是这个样子：

$(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代码赢得了比赛。

来源

2010-06-14 07:47:38

mm ...我认为jquery的$（function（）{/ * code * /}）是一个onload ...你每天都会学到新的东西 – Stefan 2010-06-14 07:51:25

但是为什么chrome和FF会有不同呢？ – Stefan 2010-06-14 07:51:57

@Stefan：如果你在加载事件触发前做这件事，这是一个竞争条件，结果往往不是确定性的。 Chrome的V8 JavaScript引擎可能会更快。 ;-)（这是*怪异的*快）。 – 2010-06-14 07:53:05

这不是一个错误。在加载图像之前，img元素的宽度为0x0。您应该等到图像完全加载。尝试是这样的：

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

来源

2010-06-14 07:41:44

你尝试把这些代码到

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

，如果没有帮助，使用jQuerys .load()功能

var $img = $('#image01'), 
    iwidth = 0, 
    iheight = 0; 

$(document).ready(function(){ 
    $img.load(function(){ 
     var img = $('#image01'); 

     img.removeAttr('width').removeAttr('height').css({width: '', height: ''}); 

     iwidth = this.width; 
     iheight = this.height; 
    }); 
}); 

$img[0].src = ''; 
$img[0].src = $img[0].src;

来源

2010-06-14 07:42:25 jAndy

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

.load不为Chrome维工作，所以使用.show）

来源

2010-11-23 00:20:08 Danny

Google Chrome再次出错

回答

相关问题