высота изображения с помощью jquery в Chrome

Question

$('img').height() возвращает 0 в Chrome, но возвращает действительную высоту в IE и Firefox.

Каков реальный способ получить высоту изображения в хром?

Answer 1

Как упоминал Джош, если изображение еще не полностью загружено, jQuery не будет знать, какие размеры еще есть. Попробуйте что-то вроде этого, чтобы убедиться, что вы пытаетесь получить доступ к его размерам только после полной загрузки изображения:

var img = new Image();

$(img).load( function() {
    //-- you can determine the height before adding to the DOM
    alert("height: " + img.height);
    //-- or you can add it first...
    $('body').append(img);
    //-- and then check
    alert($('body img').height());
}).error( function() {
    //-- this will fire if the URL is invalid, or some other loading error occurs
    alert("DANGER!... DANGER!...");
});

$(img).attr('src', "http://sstatic.net/so/img/logo.png");

Answer 2

Предварительная загрузка изображения и настройка функции обратного вызова может быть тем, что вы ищете:

// simple image preloader
function getHeight(el,fn) {
    var img = new Image();
    img.onload = function() { fn(img.height); };
    img.src = el.attr("src");
}

$("img").each(function(){
    getHeight($(this),function(h){
        // what you need to do with the height value here
        alert(h);
    });
});

Answer 3

Немного некрасивое, но эффективное исправление, которое я использовал, было использование языка бэкэнда, в моем случае php, чтобы получить высоту и установить его на изображение перед отправкой в ​​браузер.

это некрасиво, но просто и быстро

Answer 4

Я предполагаю, что эта функция вызывается до завершения загрузки изображения. Можете ли вы попробовать задержать функцию, чтобы увидеть, так ли это на самом деле? Если это так, перед запуском функции вы можете обмануть с помощью таймера.

Немного сложнее определить, когда изображение было загружено. Посмотрите на этот скрипт для некоторых идей - возможно, он будет работать для вас.

Answer 5

Проведя несколько экспериментов с этим, я обнаружил, что

$(this).height();

Возвращает 0 - однако, если вы просто используете простой старый JS

this.height;

Я получаю правильную высоту изображения.

Answer 6

Просто возникла та же проблема: заранее установите ширину и высоту с помощью CSS или HTML.

Answer 7

Попробуйте использовать предварительный загрузчик изображений, вот один Я написал для ответа на другой вопрос .