Jquery.height() возвращает разные результаты, используя F5 или CTRL + F5

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

Я запускаю этот код, а при обновлении 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'});



            });

});

любые идеи/помощь/объяснение очень ценятся. спасибо

Ответ 1

Существует разница между onload и onready.

готово будет ждать, пока не будет выполнено фактическое дерево DOM, в то время как onload будет ждать, пока ВСЕ содержимое, отображаемое на странице, не будет загружено. Таким образом, объяснение будет состоять в том, что при очистке кеша и обновлении дерево dom заканчивается намного быстрее, чем изображения, поэтому дает неправильный оттенок.

Попробуйте использовать onload-событие вместо этого и посмотрите, получится ли другой результат.

Ответ 2

Вам нужно застраховать загрузку изображения, прежде чем запрашивать у браузера его высоту. Если этот путь изображения живет в 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.

Ответ 3

Попробуйте этот подход:

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');
            });
        }
    });
});

Ответ 4

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

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

Ответ 5

Перед извлечением высоты нужно убедиться, что изображение загружено. Вы можете легко проверить это, используя свойство 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
});