0

I'm making a website with a full background slider, so the images are kinda large. I want a script that shows some text with an animation effect while the background images are loading. I already searched for this, but no success. Can someone help me further?

Thanks!

Ruud Luijten
  • 157
  • 4
  • 14
  • 1
    possible duplicate of [How to show a spinner while loading an image via JavaScript](http://stackoverflow.com/questions/51352/how-to-show-a-spinner-while-loading-an-image-via-javascript) – hjpotter92 Feb 12 '13 at 10:25
  • Is loading .gif acceptable http://preloaders.net/? – kidwon Feb 12 '13 at 10:27
  • Not really, I want a first screen with a text animation with some delays to show the logo + the name of the website + maybe a gif to see that the images are loading. – Ruud Luijten Feb 12 '13 at 10:30

2 Answers2

2

Display text by default, remove it on $(img).load(). Animate the text however you want with .animate(). If you change picture, insert the spanLoading again and repeat these steps.

<div>
    <img src="book.png" alt="Book" id="book" />
    <span id="spanLoading">Loading...</span>
</div>


<script type="text/javascript">
    $(function(){
        //animate loading text
        $("#spanLoading").animate({left: '+=50'},500); 

        //On img loaded, remove loading text
        $("#book").load(){
            $("#spanLoading").remove();
        }
    });
</script>
Robert Fricke
  • 3,637
  • 21
  • 34
0

I think you have to load dynamically your background image with the function 

 $(function()){
   $("#background").attr('src','your_image here');
 }

and set the animation image as default background in your hTML code

then you will have your effect.

BenMorel
  • 34,448
  • 50
  • 182
  • 322
Jean Zeh Mbida
  • 34
  • 4