Question

我无法让Chrome在加载DOM后识别图像宽度或高度。 Image通过phpThumb脚本（调整图像大小）动态加载。如果我拿走动态网址并将其替换为图片的直接网址我就没有问题，而且一切都在Chrome中运行但是使用动态网址时，Chrome似乎无法计算图像的宽度或高度。

任何人都有这方面的经验吗？它正在努力。

有问题的代码是：

var theImage     = new Image();
theImage.src     = $image.attr('src');
var imgwidth     = theImage.width;
var imgheight    = theImage.height;

imgwidth = 0;对于chrome，但IE，Firefox都报告了正确的大小。

Answer 1

正确的代码是.onload和以下函数：

var theImage     = new Image();
theImage.src     = $image.attr('src');
theImage.onload = function(){
    var imgwidth     = $(this).width;
    var imgheight    = $(this).height; 
});

Answer 2

http://jsfiddle.net/cyrilkong/XJUGt/4/

function imgRealSize(img) {
    var $img = $(img);
    if ($img.prop('naturalWidth') === undefined) {
        var $tmpImg = $('<img/>').attr('src', $img.attr('src'));
        $img.prop('naturalWidth', $tmpImg[0].width);
        $img.prop('naturalHeight', $tmpImg[0].height);
    }
    return {
        'width': $img.prop('naturalWidth'),
        'height': $img.prop('naturalHeight')
    };
}

$(function() {
    var target = $('img.dummy');
    var target_native_width;
    var target_native_height;
    target.each(function(index) {
        // console.log(index);
        imgRealSize(this[index]);
        target_native_width = $(this).prop('naturalWidth');
        target_native_height = $(this).prop('naturalHeight');
        $(this).parent('div').append('<p>This image actual size is ' + target_native_width + ' x ' + target_native_height + ', and css is ' + $(this).width() + ' x ' + $(this).height() + '.</p>');
    });
});

jQuery的;新图片（）的Chrome图片宽度和高度= 0

2 个答案: