1

I have an image loading that is resize to fit the window using javascript, and the image is continuously resize when the browser window is resized. However, before the javascript resize the image is loaded full-size. So you see the full-size image and then it jumps to the resized version. Can I fix this so only the resized image is loaded?

I've hacked a small work around where I make the image visibility:hidden and then after the javascript resize I set the visibility:visible but this is not the most ideal solution.

Any help would be superb, thanks.

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");

});
trying_hal9000
  • 4,343
  • 8
  • 43
  • 62
  • you can make image width to 100% and height auto. – Abhijeet K Dec 22 '14 at 07:27
  • thanks, I will remember this solution but because I need the image to fill the entire browser window, but I have content below the image, I'd need height to also be 100%, and when I do this one window resize the image is squished unproportionally – trying_hal9000 Dec 22 '14 at 07:49

2 Answers2

1

if you only want to resize the image, using jquery is overkill (assuming you are not looking for old browsers support), try it this way :

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% */
}

see here for more understanding => http://css-tricks.com/perfect-full-page-background-image/

NoobEditor
  • 15,563
  • 19
  • 81
  • 112
  • will this resize the image on window resize? – trying_hal9000 Dec 22 '14 at 07:27
  • wow this worked nicely, I found my js solution from the same site, can you elaborate on why to use the JS solution? is it only helpful to add older browser support? thanks again – trying_hal9000 Dec 22 '14 at 08:16
  • @trying_hal9000 : JS is only helpful if you want to support old browser for features not supported by them, as a developer i prefer more to use HTML5 features as it provides lots more options without help of JS/jQuery and to tackle with old browsers, i just add "You are using old browser, please update now"! :) – NoobEditor Dec 22 '14 at 08:28
0

Dont resize the image with javascript. Resize the image with CSS and Html. Add a div to the image and adjust the height and width of the div and add the following properties to image.

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

You can also follow this link How do I auto-resize an image to fit a div container

Community
  • 1
  • 1
Pavan Kumar
  • 1,735
  • 2
  • 28
  • 47