Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How to wait till the images download

    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>

  • #2
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,296
    Thanks
    10
    Thanked 584 Times in 565 Posts
    Code:
    window.onload=function(){
        $('.fadein img:gt(0)').hide();
        setInterval(function(){
          $('.fadein :first-child').fadeOut()
             .next('img').fadeIn()
             .end().appendTo('.fadein');}, 
          100);
    };
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •