Изменение размера изображения с помощью javascript без видимых помех

Question

У меня есть выделенная область изображения на моей странице html. Эта область отличается от разрешения экрана. У меня есть javascript, чтобы изменить размер этой области соответственно. Проблема в том, что при каждой перезагрузке мое изображение прыгает до полного размера и обратно, чтобы соответствовать, что создает очень неприятный визуальный эффект.

Может кто-нибудь посоветует мне, как действовать и как правильно изменить размер этого изображения?

EDIT: Целью кода изменения размера является полная высота родительского контейнера.

var windowHeight = $(window).height() - $("#myCarousel").offset().top ; 

    $('#myCarousel .carousel-inner div img').css({ 
     height: (windowHeight) + 'px' 
    }) 

Answer 1

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

Не используйте JS, чтобы ваши элементы реагировали, использовать CSS и % размер.

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

<div id="heroImage" style="background-image:url(images/largeImage.jpg)"></div> 

, имеющего этот CSS:

#heroImage{ 
    height: 900px;     /* for browsers who don't support "viewport" vh/vw */ 
    height: 100vh; 
    background: 50%/cover;  /* use cover, contain or a %size */ 
} 

jsBin demo ← изменить размер и получить удовольствие