Удостоверьтесь, что изображение загружено перед загрузкой javascript

Question

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

Html:

<div class="hidden-xs col-sm-3 text-center"> 
     <img src="../img/body/gear.png" alt="gear.png" class="scale-icon pull-center" /> 
</div> 

JavaScript:

<script> 
function pullCenter() { 
     $(this).css('margin-top', $(this).parent().parent().height()/2-$(this).height()/2); 
    } 
    $('.pull-center').each(pullCenter); 
    $(window).resize(function() { 
     $('.pull-center').each(pullCenter); 
    }); 
</script> 

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

$('.pull-center').each(pullCenter); 

Java скрипт находится в нижней части HTML ,

Answer 1

Вы можете использовать jQuery для вызова функций, если изображение загружается или если есть ошибка:

$("<img/>") 
    .on('load', function() { console.log("image loaded correctly"); }) 
    .on('error', function() { console.log("error loading image"); }) 
    .attr("src", $(originalImage).attr("src")) 
; 

Answer 2

Я лично огонь код выравнивающего на события загрузки для каждого объекта изображения.

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

При запуске события передайте объект методу выравнивания.

Таким образом, при загрузке изображений будет срабатывать выравнивающий код.

Если выравнивание любого изображения может мешать выравниванию других, я имею в виду, если порядок, в котором вы выравниваете разные изображения, может изменить способ отображения в конце, тогда ваш лучший вариант - запустить код после загрузки всей страницы, используя событие document.ready для jQuery, например, как утверждает Aleem.