CODEWITHSUNDEEP
jquery
Ruud Luijten
Ruud Luijten

Reputation: 167

Show text while loading images

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!

Upvotes: 0

Views: 4266

Answers (2)

Robert Fricke
Robert Fricke

Reputation: 3643

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>

Upvotes: 2

Jean Zeh Mbida
Jean Zeh Mbida

Reputation: 34

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.

Upvotes: 0

Related Questions