Скрипт не работает с документом. Уже в Safari & Chrome (хорошо FF), но работает с document.resize

Question

У меня есть следующий скрипт jquery для изменения размера изображения и предоставления ему левого поля для его горизонтального центрирования. Скрипт отлично работает в FF, но в Safari и Chrome у меня проблемы.

Safari & Chrome prob: изображение корректно изменяется, но leftMargin, по-видимому, устанавливается до , размер изображения изменяется, в результате чего изображение слишком сильно сдвинуто влево. Эта проблема возникает только на document.ready. При изменении размера браузера скрипт работает нормально.

function imageresize() {
    var h = $(window).height(),
        w = $(window).width(),
        newHeight = h * 0.5,
        newTopMargin = newHeight * 0.12;

        $('img.resize').css({'height' : newHeight + 'px', 'margin-top' : '-' + newTopMargin + 'px'});
    var leftMargin = (w - ($('img.resize').width()))/2;
        $('img.resize').css('margin-left', leftMargin + 'px');

}
$(document).ready(function() {
  imageresize();
});

$(window).resize(function() {
  imageresize();
});

Сценарий размещен перед </body>.

Любая помощь будет принята с благодарностью!

Answer 1

Событие готовности документа может сработать до завершения загрузки изображений.Попробуйте вместо этого привязать к окну или к событию загрузки изображений .

$(window).load(function() {
  imageresize();
});

// or

$('img').load(function() {
  imageresize();
});

Answer 2

Если это только одно изображение, вы также можете привязать его к событию загрузки изображения.

$(img).load(function() {
  imageresize();
});