animated background image after page finishes loading

One_Infinite_Life
One_Infinite_Life used Ask the Experts™
on
*AFTER* a page is totally loaded on my site, I would like to bring in a large, animated background, replacing the original background (which would just be the first image in the animation).  Would probably use a (large) animated GIF unless you have a different recommendation, e.g. cycling through the images in Javascript.  Note I plan to use a large background image, and thus with the animation images it would be to imposing to load right away.

Can you 1) tell me the javascript code or code library to use for this, and 2) let me know any pitfalls or concerns you may have -- i.e. is this doable.  Do you by chance know of a site I can look at as an example with a substantial animated background.   Thanks Much
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®

Author

Commented:
Thanks.   I looked at this example.   Before I do the various work to get the graphics for the animation I'm thinking of doing, can you tell me if this library will only start the animation after the entire page is loaded (so load times aren't slowed down)?   I didn't see anything in regard to that in the code:


<script type="text/javascript" charset="utf-8">
    var scrollSpeed = 70;
    var step = 1;
    var current = 0;
    var imageWidth = 2247;
    var headerWidth = 800;     
 
    var restartPosition = -(imageWidth - headerWidth);
 
    function scrollBg(){
        current -= step;
        if (current == restartPosition){
            current = 0;
        }
 
        $('#header').css("background-position",current+"px 0");
    }
 
    var init = setInterval("scrollBg()", scrollSpeed);
</script>

Open in new window

Commented:
Depending upon the size of your page it may not make much difference, but you could use:

<script type="text/javascript" charset="utf-8">

$(document).ready(function() {

    var scrollSpeed = 70;
    var step = 1;
    var current = 0;
    var imageWidth = 2247;
    var headerWidth = 800;    
 
    var restartPosition = -(imageWidth - headerWidth);
 
    function scrollBg(){
        current -= step;
        if (current == restartPosition){
            current = 0;
        }
 
        $('#header').css("background-position",current+"px 0");
    }
 
    var init = setInterval("scrollBg()", scrollSpeed);

});
</script>

or a .load handler:

see:  http://api.jquery.com/ready/ and http://api.jquery.com/load-event/

Commented:
No objection, although that was a long time ago.
Expert of the Year 2014
Top Expert 2014

Commented:
This question has been classified as abandoned and is closed as part of the Cleanup Program. See the recommendation for more details.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial