1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Loading multiple animated gif images on page.

Discussion in 'CSS' started by faithnomoread, Feb 4, 2009.

  1. #1
    Hello, I have 3 animated gif images that take forever to load on the page and I don't think they are that big. I tried to make the images load at sperate times throughout the css instead of all at once, but it doesn't help. Once the page loads fully and the images are in the cache of course it loads faster. I keep reading that it could be the way my server works with the browser. Is there a way I can make it load faster with out having to use flash and keep the same images? The page is here:

    http://lateralus.byethost12.com/music/maynard/

    and the css is here:

    http://lateralus.byethost12.com/music/maynard/style.css

    The elements are:
    #apc
    #pus
    #cad
     
    faithnomoread, Feb 4, 2009 IP
  2. ExtremeData

    ExtremeData Well-Known Member

    Messages:
    450
    Likes Received:
    21
    Best Answers:
    0
    Trophy Points:
    125
    #2
    Second and 3rd have 1.5Mb and 1.3Mb.
    You can use javascript to load the images after the page is loaded.
     
    ExtremeData, Feb 5, 2009 IP
  3. faithnomoread

    faithnomoread Peon

    Messages:
    174
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Thank you, but I only know a little JS, can you tell me what the code would be? I would appreciate it.
     
    faithnomoread, Feb 5, 2009 IP
  4. ExtremeData

    ExtremeData Well-Known Member

    Messages:
    450
    Likes Received:
    21
    Best Answers:
    0
    Trophy Points:
    125
    #4
    Add this code before </head> tag :
    <script type="text/javascript">
    <!--
    function getImage(pImageURL) {
    	var img=new Image();
    	img.src=pImageURL;
    	document.getElementById('placeHolder').src=img.src;
    	return false;
    }
    function LoadImages(){
    	return getImage('cad.gif');
    	}
    //-->
    </script>
    Code (markup):
    Add this code before </body> tag :
    <script type="text/javascript">
    LoadImages();
    </script>
    Code (markup):
    Where you need the image (for example cad.gif) replace the cad.gif code
    <img src="images/cad.gif" alt="cad">
    Code (markup):
    with
    <img id="placeHolder" border="0" src="placeHolder.jpg" width="100" height="100">
    Code (markup):
    Be sure you have a image called placeHolder.jpg (maybe 1px blank image to be a small size like 1Kb ).
    If you need your image to be into a directory for example images you have to add before placeHolder.jpg -> images/ so the code will be
    <img id="placeHolder" border="0" src="images/placeHolder.jpg" width="100" height="100">
    Code (markup):
    Do the same for cad.gif if is into a directory like images.
    Change the width and height to your big image (cad.gif) width and height(not placeHolder.jpg).
    For cad.gif you will use this code :
    <img id="placeHolder" border="0" src="images/placeHolder.jpg" width="320" height="240">
    Code (markup):
    Do the same for all your images you want to load after the page is loaded.
    If you have problems with this code let me know.
     
    ExtremeData, Feb 5, 2009 IP
  5. faithnomoread

    faithnomoread Peon

    Messages:
    174
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Hey, thnak you very much, I do appreciate it a great deal. I can put that first script that goes into the head into a .js file and link it right?
     
    faithnomoread, Feb 6, 2009 IP
  6. My220x

    My220x Member

    Messages:
    624
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    35
    #6
    Yes you can:
    
    <script type="text/javascript" src="linktofile.js"></script>
    HTML:
     
    My220x, Feb 7, 2009 IP
  7. ExtremeData

    ExtremeData Well-Known Member

    Messages:
    450
    Likes Received:
    21
    Best Answers:
    0
    Trophy Points:
    125
    #7
    @faithnomoread, I have recived your PM and I answer here maybe someone else will need to do this trick for image loading.

    You must add another js function to do that for each image.Also you must use unique ID's for each image.
    So you will have <img id="placeHolder".... for first image and <img id="placeHolder2" for second image etc..
    Also you must duplicate the js function and use new vars etc.. and before </body> tag add for first image :
    <script type="text/javascript">
    LoadImages();
    </script>
    Code (markup):
    For second image you need to add LoadImages2(); or what name you used for js function...


    You can add the js code into a external file but you must add this code into html file before </body>
    <script type="text/javascript">
    LoadImages();
    </script>
    Code (markup):
     
    ExtremeData, Feb 7, 2009 IP
  8. faithnomoread

    faithnomoread Peon

    Messages:
    174
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #8
    Hey, thank you very much. I had already thought about loadImages2 and and a second var and a 2nd load and had them set already. I understand enough about coding and js to do that, but it is only working for the second image. I will post my whole code here for you to see what I have done (I have deleted unnecessary code to save room here):

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Maynards Projects</title>
    <link rel="stylesheet" href="style.css" type="text/css" />
    <!--[if IE]>
    <link rel="stylesheet" href="ie.css" type="text/css" />
    <![endif]-->
    <style type="text/css">
    @import url(http://www.google.com/cse/api/branding.css);
    </style>
    
    <script type="text/javascript">
    <!--
    function getImage(pImageURL) {
    	var img=new Image();
    	img.src=pImageURL;
    	document.getElementById('placeHolder').src=img.src;
    	return false;
    }
    function LoadImages(){
    	return getImage('images/pus.gif');
    	}	
    //-->
    </script>
    <script type="text/javascript">
    <!--
    function getImage(pImageURL) {
    	var img=new Image();
    	img.src=pImageURL;
    	document.getElementById('placeHolder2').src=img.src;
    	return false;
    }
    function LoadImages2(){
    	return getImage('images/cad.gif');
    	}	
    //-->
    </script>
    </head>
    <body>
    	<div id="top">
    	</div>
    <div id="container">
    
    
    
    			<div id="pus">
    				<p>Puscifer, his newer band, is different from his norm, but quite interesting. Click image to visit the page.</p>			
    				<a href="puscifer"><img id="placeHolder" border="0" src="images/placeHolder.jpg" width="320" height="240" /></a>
    			</div>
    			<div id="cad">
    				<p>Maynard is now a wine maker in Arizona. Click image to visit the page. </p>			
    				<a href="caduceus"><img id="placeHolder2" border="0" src="images/placeHolder.jpg" width="320" height="240" /></a>
    			</div>		
    
    	</div>
    	<script type="text/javascript">
    	LoadImages();
    	</script>	
    	<script type="text/javascript">
    	LoadImages2();
    	</script>
    </body>
    </html>
    Code (markup):
    Thank you for a any help.
     
    faithnomoread, Feb 7, 2009 IP
  9. ExtremeData

    ExtremeData Well-Known Member

    Messages:
    450
    Likes Received:
    21
    Best Answers:
    0
    Trophy Points:
    125
    #9
    I have not tested it but hope it work.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Maynards Projects</title>
    <link rel="stylesheet" href="style.css" type="text/css" />
    <!--[if IE]>
    <link rel="stylesheet" href="ie.css" type="text/css" />
    <![endif]-->
    <style type="text/css">
    @import url(http://www.google.com/cse/api/branding.css);
    </style>
    
    <script type="text/javascript">
    <!--
    function getImage(pImageURL) {
    	var img=new Image();
    	img.src=pImageURL;
    	document.getElementById('placeHolder').src=img.src;
    	return false;
    }
    function LoadImages(){
    	return getImage('images/pus.gif');
    	}	
    //-->
    </script>
    <script type="text/javascript">
    <!--
    function getImageTwo(pImageURLTwo) {
    	var img=new Image();
    	img.src=pImageURLTwo;
    	document.getElementById('placeHolderTwo').src=img.src;
    	return false;
    }
    function LoadImagesTwo(){
    	return getImageTwo('images/cad.gif');
    	}	
    //-->
    </script>
    </head>
    <body>
    	<div id="top">
    	</div>
    <div id="container">
    
    
    
    			<div id="pus">
    				<p>Puscifer, his newer band, is different from his norm, but quite interesting. Click image to visit the page.</p>			
    				<a href="puscifer"><img id="placeHolder" border="0" src="images/placeHolder.jpg" width="320" height="240" /></a>
    			</div>
    			<div id="cad">
    				<p>Maynard is now a wine maker in Arizona. Click image to visit the page. </p>			
    				<a href="caduceus"><img id="placeHolderTwo" border="0" src="images/placeHolder.jpg" width="320" height="240" /></a>
    			</div>		
    
    	</div>
    	<script type="text/javascript">
    	LoadImages();
    	</script>	
    	<script type="text/javascript">
    	LoadImagesTwo();
    	</script>
    </body>
    </html>
    Code (markup):
     
    ExtremeData, Feb 7, 2009 IP
    faithnomoread likes this.
  10. faithnomoread

    faithnomoread Peon

    Messages:
    174
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #10
    Thank you so much. It worked. I see that you added the Two to the (pImageURL), so is that an element you name or a preset element?If U want to do that to a 3rd image do I name it Three or can I name it anything I want? I do appreciate it greatly. I have added to your rep points.
     
    faithnomoread, Feb 7, 2009 IP
  11. ExtremeData

    ExtremeData Well-Known Member

    Messages:
    450
    Likes Received:
    21
    Best Answers:
    0
    Trophy Points:
    125
    #11
    You can use any name for all variables..pImageURLTwo, pImageURLThree or pImageURL2, pImageURL3 etc just to use unique vars for each image.
    I have not tested yet but as classes can be used for multiple instances I think if you replace id="placeHolder" with class="placeHolder" you will can use same class for all images.
    But the safest way is to go with id's.
    Glad to help you.
     
    ExtremeData, Feb 7, 2009 IP
  12. wd_2k6

    wd_2k6 Peon

    Messages:
    1,740
    Likes Received:
    54
    Best Answers:
    0
    Trophy Points:
    0
    #12
    i'd concentrate more on optimizing the image sizes rather than the script, some of those images are far larger than they need to be, choose correct file formats and sizes that you need
     
    wd_2k6, Feb 7, 2009 IP
  13. faithnomoread

    faithnomoread Peon

    Messages:
    174
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #13
    What other animated format is there? Other than flash or something I can't use.
     
    faithnomoread, Feb 7, 2009 IP
  14. mysterylinks

    mysterylinks Banned

    Messages:
    316
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    0
    #14
    you should use flash really...

    the fact that they are such huge files 1mb+... it is not a good idea.

    if you end up with 1000s of people using your site... you will use up a LOT of bandwidth....

    i suppose you could host the files somewhere else, but the files will get banned eventually and you will have to move them somewhere else
     
    mysterylinks, Feb 7, 2009 IP
  15. faithnomoread

    faithnomoread Peon

    Messages:
    174
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #15
    Yeah, I just made it into a flash file, but it is new territory for me. It reduced the size by almost half.
     
    faithnomoread, Feb 7, 2009 IP
  16. mysterylinks

    mysterylinks Banned

    Messages:
    316
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    0
    #16
    good skills!

    be very careful with flash. the best use to make 95% of your site html as normal, then just use flash for images, videos etc.

    I would not advise making the whole site as flash, unless you are happy that it will perform badly in the search engines
     
    mysterylinks, Feb 7, 2009 IP