Невозможно получить ширину и высоту img jQuery

Я полностью смущен этим фрагментом кода. Когда я только загрузить страницу imgWidth1 и imgHeight1 оба равны «0» Но когда я изменить размер моего окна, код работает и imgWidth1 и imgHeight1 имеют такое же значение, как измерение изображения.Невозможно получить ширину и высоту img jQuery

Вся помощь приветствуется, спасибо.

var imgWidth1 = $("#image-hover-0").outerWidth(); 
var imgHeight1 = $("#image-hover-0").outerHeight(); 

$("#hover-img-0").css("width", imgWidth1 + "px"); 
$("#hover-img-0").css("height", imgHeight1 + "px"); 
$("#hover-img-0").css("line-height", imgHeight1 + "px"); 

$(window).resize(function() { 

    var imgWidth = $("#image-hover-0").outerWidth(); 
    var imgHeight = $("#image-hover-0").outerHeight(); 

    $("#hover-img-0").css("width", imgWidth + "px"); 
    $("#hover-img-0").css("height", imgHeight + "px"); 
    $("#hover-img-0").css("line-height", imgHeight + "px"); 

});

источник

2015-08-21 Simon

Это может произойти, если изображение не загружено полностью. Вы уверены, что он полностью загружен, когда вы получаете 0? – cfly24

потому, что изображение еще не загружено. см. http://stackoverflow.com/questions/623172/how-to-get-image-size-height-width-using-javascript – Hacketo

Есть вероятность, что это выполняется слишком рано, и изображение недоступно при вызове свойств , Вы можете попробовать обернуть это в обработчик события 'load' окна. – spenibus

Это, скорее всего, связано с тем, что ваш код не вложен в вызове функции $(window).load(). Измените код на следующий:

$(window).load(function(){ 
    var imgWidth1 = $("#image-hover-0").outerWidth(); 
    var imgHeight1 = $("#image-hover-0").outerHeight(); 

    $("#hover-img-0").css("width", imgWidth1 + "px"); 
    $("#hover-img-0").css("height", imgHeight1 + "px"); 
    $("#hover-img-0").css("line-height", imgHeight1 + "px"); 

    $(window).resize(function() { 

     var imgWidth = $("#image-hover-0").outerWidth(); 
     var imgHeight = $("#image-hover-0").outerHeight(); 

     $("#hover-img-0").css("width", imgWidth + "px"); 
     $("#hover-img-0").css("height", imgHeight + "px"); 
     $("#hover-img-0").css("line-height", imgHeight + "px"); 

    }); 
});

источник

2015-08-21 12:54:29

избили меня на 5 секунд –

Хорошо, как OP может получить '$ (" # hover-img-0 ")', если DOM не загружен – Hacketo

Событие 'ready' jQuery не гарантирует загрузку изображений, только DOM , – spenibus

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

Для первых, вы должны ждать изображение для загрузки после того, как вы можете получить реальный размер:

youImage.addEventListener('onload', 
    function() { 
    console.log('pic width is: ', this.naturalWidth); 
    console.log('pic height is: ', this.naturalHeight); 
});

Для второго, вы должны encupsle его в DIV и получить его размер.

Я надеюсь, что мой ответ может вам помочь.

источник

2015-08-21 13:05:55 Waver

Невозможно получить ширину и высоту img jQuery

ответ

Смежные вопросы