How to wait till the images download

pinastro · 01-27-2013, 04:46 PM

I am working on a website to build a brand for a video game.

http://thedevigngame.com/

The problem is when the internet is slow and the images take time to download and gives a jittery effect...I want to avoid that..else everything is fine

I want to javascript to wait for the images to download to the client side before the javascript loads....how to do that...

The code is given below:

Code:

<html>
<head> <title> deVign - a game by pinastro </title>
 <style>
   
   .fadein { position:relative;width:50%; }
   .fadein img { position:absolute; left:51%; top:50%; }
  .subscription {position:absolute; left:44%; top:70%; style="float:left;"}

 </style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>

<script>

$(function(){
    $('.fadein img:gt(0)').hide();
    setInterval(function(){
      $('.fadein :first-child').fadeOut()
         .next('img').fadeIn()
         .end().appendTo('.fadein');}, 
      100);
});

</script>

 
</head>
<body bgcolor="black">
</center>

<div class="fadein">
<img src="0001.png"/>
<img src="0002.png"/>
  <img src="1.png"/>
<img src="1001.png"/>
<img src="1002.png"/>
<img src="1003.png"/>
<img src="1004.png"/>
  <img src="2.png"/>  
  <img src="3.png"/>  
 <img src="4.png"/>  
 <img src="5.png"/>  
<img src="6.png"/>  
 <img src="7.png"/>  
   <img src="8.png"/>  
   <img src="81.png"/> 
<img src="81.png"/>  
<img src="81.png"/>   
<img src="9.png"/>  
<img src="91.png"/>  
<img src="92.png"/>  
<img src="93.png"/>  
<img src="94.png"/>  
<img src="95.png"/>  
<img src="96.png"/>  
<img src="97.png"/>  

<img src="99.png"/>
<img src="991.png"/>    
<img src="992.png"/>    
<img src="993.png"/>    
<img src="994.png"/>    
<img src="995.png"/>    
<img src="996.png"/> 
<img src="997.png"/> 
<img src="998.png"/> 
<img src="999.png"/> 
<img src="9991.png"/> 
<img src="9992.png"/> 
<img src="9993.png"/> 
<img src="9994.png"/> 
<img src="9995.png"/> 
<img src="9996.png"/> 

</div>
<br/>

<div style="float:left;">
<font color="grey" family="musio">

<!--
<form action="Send.php" method="post"> 
		<div  class="subscription" style="float:left;">
			
			<div>
			<input name="email" placeholder="submit email id 4 updates" type="text" class="form_1" style="float:left;">
			</div>
			
					
			
			<div><input type="submit" name="Send" value="Submit" style="float:left;">
			
			
	</form>
	-->

</font>

</div>

</center>	
</body>
</html>

rnd me · 01-28-2013, 12:42 PM

Code:

window.onload=function(){
    $('.fadein img:gt(0)').hide();
    setInterval(function(){
      $('.fadein :first-child').fadeOut()
         .next('img').fadeIn()
         .end().appendTo('.fadein');}, 
      100);
};