Итак, я пытаюсь найти высоту моих изображений, а затем добавить верхний край, что позволяет мне наложить вертикальный центр.
Я запускаю этот код, а при обновлении F5 получаю правильную высоту, но при обновлении CTRL + F5 он дает мне намного меньшую высоту. Я предполагаю, что это загрузка/задержка, но я использую документ, готовый, поэтому не совсем уверен, что происходит. Я пробовал использовать функцию php, но это замедляет сайт вниз, поэтому нужно придерживаться jQuery.
вы можете видеть, как он работает здесь. www.mzillustration.com
jQuery(document).ready(function() {
if (jQuery('.imagedisplay').length != 0) {
jQuery('.imagedisplay').each(function(){
var imgheight = jQuery(this).find('img').height();
var topmarg = ((240 - imgheight) / 2) ;
jQuery(this).find('img').css({'margin-top':topmarg+'px'});
});
});
любые идеи/помощь/объяснение очень ценятся. спасибо
Существует разница между onload и onready.
готово будет ждать, пока не будет выполнено фактическое дерево DOM, в то время как onload будет ждать, пока ВСЕ содержимое, отображаемое на странице, не будет загружено. Таким образом, объяснение будет состоять в том, что при очистке кеша и обновлении дерево dom заканчивается намного быстрее, чем изображения, поэтому дает неправильный оттенок.
Попробуйте использовать onload-событие вместо этого и посмотрите, получится ли другой результат.
Вам нужно застраховать загрузку изображения, прежде чем запрашивать у браузера его высоту. Если этот путь изображения живет в html, вам, к сожалению, понадобится jQuery pluggin, чтобы обрабатывать его в режиме браузера.
https://github.com/alexanderdickson/waitForImages
http://desandro.github.com/imagesloaded/
Или вам придется ждать события window.onload, которые в jquery выглядят следующим образом:
$(window).on('load', function(){....
Однако, если вы используете событие загрузки окна, он будет ждать, пока все ресурсы загрузятся, и в зависимости от вашего сайта, что может быть серьезной задержкой по сравнению с измерением только самого изображения.
Или, если вам удобно загружать изображение из javascript, просто упорядочивая свой код, он будет обрабатывать это:
var loadTester = new Image(),
imgH;
$(loadTest).on('load',function(){
imgH = $('#image').attr('src',loadTester.src).height();
}
loadTester.src = "paht/to/image.jpg";
Причина, по которой вы видите разницу в способе перезагрузки страницы, заключается в том, что простое обновление не очищает кеш, поэтому изображение уже загружено. Когда вы нажимаете ctrl + f5, он очищает кеш и поэтому изображение еще не загружено, когда вы запрашиваете браузер для высоты.
Для разработки кэширования durring рассмотрите возможность создания панели инструментов веб-разработчика firefox.
Попробуйте этот подход:
jQuery(function() {
jQuery('.imagedisplay img').each(function() {
var $this = jQuery(this),
height = $this.height();
if (height) {
$this.css('margin-top', ((240 - height) / 2) + 'px');
} else {
$this.on('load', function() {
$this.css('margin-top', ((240 - $this.height()) / 2) + 'px');
});
}
});
});
изображения могут/кэшироваться/загружаться отдельно от фактического содержимого страницы. документ, готовый, может (и, как мне кажется, обычно) встречаться до того, как все будет загружено.
попробуйте добавить прослушиватель событий к загружаемому фактическому элементу.
Перед извлечением высоты нужно убедиться, что изображение загружено. Вы можете легко проверить это, используя свойство complete на изображении. Попробуйте следующее:
var setH = function() {
$(this).css('margin-top', (240 - this.height) / 2);
}
$('.imagedisplay img').each(function() {
if( this.complete ) {
setH.call(this); // apply height straight away
return;
}
$(this).load(setH); // apply height when the image has loaded
});