Forums

cwhitaker

Hello everyone.

I'm creating a portfolio site for my self. And the background Image is very large and detailed, so of course it is a very large file size.

I'm looking for a piece of javascript that will show a loading bar until the image is first loaded, Then take you to the page.

Thank you.

AshtonSanders

I haven't heard of a javascript loading bar for an image. It sounds like your in need of a Flash Loading bar *toot* ... but then it'd have to be flash... If you're not going flash, I'd recommend decreasing the file quality and having the image load last...

Mr KiTT3N

You can do it in jquery

Have a javascript lay a div loading over the page and a progressbar slowly increasing and for good measure end at 80% (ish)

Attach window.load( ....animate to 100% .... then kill loading page)
note that .load wont fire untill the dom has finished loading all its request

So roughly the code would look like this


<script>
$(function(){
    var $wrapper = $('#loadingWrap'),
          $loadingBar = $wrapper.css('display', 'block').find('#loadingBar'),
          loadingwidth = $loadingBar.width();

    $loadingBar.animate({width: (loadingwidth * .9)}, 10000);
});
window.load(function(){
    $loadingBar.stop().animate({width: loadingwidth}. 500, function(){
        $wrapper.remove();
    });
});
</script>

completely untested just typed in the textarea... but gives you an idea

treehouse : what would you like to learn today?

Forums

Javascript site loading page.