Jquery; Ширина и высота изображения Chrome = 0 для нового изображения () - PullRequest
Новая
       40

Jquery; Ширина и высота изображения Chrome = 0 для нового изображения ()

3 голосов
/ 04 марта 2011

У меня проблемы с тем, чтобы Chrome распознал ширину или высоту изображения после загрузки DOM. Изображение динамически загружается через скрипт phpThumb (который изменяет размер изображения). Если я уберу динамический URL-адрес и просто заменю его на прямой URL-адрес изображения, у меня не возникнет проблем, и все будет работать в Chrome, но с динамическим URL-адресом хром, похоже, не сможет рассчитать ширину или высоту изображения.

Кто-нибудь имеет опыт работы с этим? Это делает мою голову.

Код, о котором идет речь: 

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

Где imgwidth = 0; для chrome, но IE, Firefox сообщают правильный размер.

Ответы [ 2 ]

5 голосов
/ 04 июня 2011

Правильный код - .onload и следующая функция: 

var theImage     = new Image();
theImage.src     = $image.attr('src');
theImage.onload = function(){
    var imgwidth     = $(this).width;
    var imgheight    = $(this).height; 
});
0 голосов
/ 12 апреля 2012

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