jQuery высота / ширина изображения в Chrome

Question

Я пытаюсь получить ширину / высоту изображения, чтобы установить ширину / высоту родительского контейнера. Это мой код для этого:

var current_img = temp.find(".test-img").attr('src', c['img']).addClass("active-image");

Затем я получаю ширину / высоту изображения через

current_img.css('width');

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

$(".test-img").each(function (index) {
                        $(this).load(function() {
                            imgwidth = $(this).css('width');
                            imgheight = $(this).css('height');
                                if (imgwidth != "0px" && imgheight != "0px")
                                    $(this).parent().addClass('center').css({'width' : imgwidth, 'height' : imgheight});
                                    });
                    });

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

Вот эта страница вопроса: http://swolepersonaltraining.com/testing/sorter/

Answer 1

Хорошо, поэтому после многих исследований я смог найти решение. Это не идеально, но лучшее, что я придумал до сих пор.

var img = new Image(); //create new image
$(img).append("div").fadeIn('fast', function() { //We use the callback function from fadein
    var width = $(img).width(); 
    var height = $(img).width();
});

Это обходное решение основано на том, что fadeIn будет выполнять функцию только после правильной загрузки изображения. Моя проблема заключалась в том, что я очищал div, который содержал изображение, и снова заполнял его, но он все еще сохранялся в браузере. Поэтому img.load () ничего не сделал, так как обнаружил, что изображение действительно загружено.

Из документации jQuery:

Может перестать срабатывать для изображений, которые уже живут в кеше браузера

Надеюсь, это поможет!

Answer 2

Это может быть дубликат Получить реальную ширину и высоту изображения с помощью JavaScript? (в Safari / Chrome) . Там есть подробное описание.

Answer 3

Используя $('img').css('width'), вы получаете значение свойства width стиля изображения, а не фактическую ширину изображения, вместо этого используйте $('img').width().