Javascript изменяет размер фонового изображения, но сначала загружается изображение в натуральную величину - любое исправление?

У меня есть загрузка изображения, размер которой изменяется в соответствии с окном, используя javascript, и изображение постоянно изменяется при изменении размера окна браузера. Однако перед изменением размера javascript изображение загружается в полноразмерном виде. Таким образом, вы видите полноразмерное изображение, а затем оно переходит в измененную версию. Могу ли я исправить это, так загружается только изображение с измененным размером?Javascript изменяет размер фонового изображения, но сначала загружается изображение в натуральную величину - любое исправление?

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

Любая помощь будет превосходной, спасибо.

HTML

<body> 
    <img style="content:url(/uploads/user/bg_image/31/background.jpg) no-repeat fixed left top;" id="bg"> 
</body>

JAVASCRIPT

$(window).load(function() {  

     var theWindow  = $(window), 
      $bg    = $("#bg"), 
      aspectRatio  = $bg.width()/$bg.height(); 

     function resizeBg() { 

       if ((theWindow.width()/theWindow.height()) < aspectRatio) { 
        $bg 
         .removeClass() 
         .addClass('bgheight'); 
       } else { 
        $bg 
         .removeClass() 
         .addClass('bgwidth'); 
       } 

     } 

     theWindow.resize(function() { 
       resizeBg(); 
     }).trigger("resize"); 

});

источник

2014-12-22 trying_hal9000

вы можете сделать изображение шириной до 100 % и высота авто. – Abhijeet

спасибо, я запомню это решение, но потому, что мне нужно изображение, чтобы заполнить все окно браузера, но у меня есть контент под изображением, мне нужно, чтобы высота тоже была на 100%, и когда я делаю это, одно окно меняет размер изображения непроизвольно скручивается –

, если вы хотите, чтобы изменить размер изображения, используя JQuery является излишеством (если вы не ищете старые браузеры поддерживают), попробуйте это следующим образом:

div#bg { 
    background: url(img/bg.jpg) no-repeat fixed left top;; 
    -webkit-background-size: cover; /*or 100% 100% */ 
    -moz-background-size: cover;/*or 100% 100% */ 
    -o-background-size: cover;/*or 100% 100% */ 
    background-size: cover;/*or 100% 100% */ 
}

смотрите здесь для большего понимания =>http://css-tricks.com/perfect-full-page-background-image/

источник

2014-12-22 07:27:03 NoobEditor

будет ли это изменять размер изображения при изменении размера окна? –

@ try_hal9000: да .... я лично предпочитаю '100% 100%' размер !! :) – NoobEditor

wow это сработало красиво, я нашел мое решение js с того же сайта, не могли бы вы объяснить, почему использовать решение JS? полезно ли использовать более раннюю поддержку браузера? Еще раз спасибо –

Dont изменить размер изображения с помощью JavaScript. Измените размер изображения с помощью CSS и Html. Добавьте div в изображение и отрегулируйте высоту и ширину div и добавьте следующие свойства к изображению.

max-width:100%; 
max-height:100%;

Вы также можете по этой ссылке How do I auto-resize an image to fit a div container

источник

2014-12-22 07:26:41

будет ли это изменять размер изображения при изменении размера окна? –

Знаете ли вы, что отзывчивый? –

yah, если пользователь изменит размер окна браузера, размер изображения изменится в соответствии с окном браузера –

Javascript изменяет размер фонового изображения, но сначала загружается изображение в натуральную величину - любое исправление?

ответ

Смежные вопросы