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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 27
  1. #1
    New Coder
    Join Date
    May 2010
    Posts
    43
    Thanks
    9
    Thanked 0 Times in 0 Posts

    Question A Bit Of Advice!

    Hello! I have recently begun the creation of my online web designers portfolio and I have come across a small, yet easily correctable (I'm praying!) problem.

    The main problem is that when my site is visited for the first time, the site takes to long to load/create the cache!

    I have done things such as kept everything in external stylesheets etc, but one thing I believe is the cause is the images, there are so many so its understandable, what I was wondering is if its possible to create a preloading page, that will create the cache for the entire website?? Bearing in mind I have only four pages!

  • #2
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,146
    Thanks
    39
    Thanked 505 Times in 499 Posts

    Arrow

    It's not the number of pages to display, but more likely the size of the images.
    The bigger (resolution) the images are the more bytes to transfer before the display.

    You could put the images loads at the end of the script instead of the <HEAD> area.
    This way the page text would display for the user and the images would fill in as received by the browser.
    You might try searching this forum for ideas on how to do this.

    Depending on the image type, you might be able to compress the images a bit.
    Google "image compression for internet" for some leads.

    Hope it helps. Good Luck!

  • #3
    New Coder
    Join Date
    Feb 2010
    Posts
    44
    Thanks
    0
    Thanked 3 Times in 3 Posts
    I hope you aren't using bitmap images (bmp)! You should be using jpg, jpeg, png or gif and using reasonable compression on the jpgs. Also, you should not be using images that are huge in resolution and just setting the width and height styles to shrink them to the size you want. You need to use a graphic editor like photoshop to shrink the images' dimensions to the size you want.

    With a regular "high speed" internet connection you would be hard pressed to make a page take a long time to load even with pictures. Unless you are displaying pages and pages of images! By "pages" I mean screen pages... in other words there is no scroll bar if your website takes up one screen page. You shouldn't have to scroll for longer than 5-10 seconds MAX to reach the bottom of a page or else you have WAY too much content and should use pagination. If you don't know what pagination is, google it.

    jmrker's suggestion is also very useful.

  • #4
    Regular Coder
    Join Date
    Nov 2009
    Posts
    247
    Thanks
    4
    Thanked 22 Times in 22 Posts
    Vizard-Coder:

    This code will fade-in your images when they are fully loaded.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Fade-in Image Load</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript">
    
    	var imgPath = "./images/";
    	var imgSet = ["CB1.jpg","CB3.jpg","CB2.jpg","CB4.jpg"];  
    	var pagingImg = [];
    
    	var IE = navigator.appName == "Microsoft Internet Explorer" ? true : false;		
    
    	function doneLoad(nInterval,nLoadImg){
    
    		clearInterval(nInterval);
    		IE ? nLoadImg.detachEvent('onload', waitLoad, false) : nLoadImg.removeEventListener('load', waitLoad, false);
    	}
    
    	function waitLoad(nLoadImg){
    
    		var nOpacity = 0;			
    		var nInterval = setInterval(function()
    			{
    		 	 nOpacity < 100 ? nOpacity = nOpacity + 5 : doneLoad(nInterval,nLoadImg);
    		 	 IE ? nLoadImg.style.filter = "alpha(opacity = "+nOpacity+")"
    		 	 : nLoadImg.style.opacity = (nOpacity / 100); 
    			}, 5);			 
    	}
    
    	function init(){
    
    		var nImg = document.getElementsByTagName('img');
    		for (i=0; i<nImg.length; i++)
    			{
    			 if (nImg[i].className == "pagingImg")
    				{
    				 pagingImg[pagingImg.length] = nImg[i];
    				}
    			}	
    		for (i=0; i<imgSet.length; i++)
    			{
    		 	 IE ? pagingImg[i].style.filter = "alpha(opacity = 0)" : pagingImg[i].style.opacity = 0;			
    		 	 pagingImg[i].onload = function()
    				{
    			 	 waitLoad(this);
    				}	
    			 pagingImg[i].src =  imgPath + imgSet[i];			 	
    			}		
    	}
    
    	IE ? attachEvent('onload', init, false) : addEventListener('load', init, false);	
    
    </script>
    </head>
    <body>
    
    	<div>
    		<img src=null class="pagingImg" width="200" height="150" alt="">
    
    		<img src=null class="pagingImg" width="200" height="150" alt="">
    
    		<img src=null class="pagingImg" width="200" height="150" alt="">
    
    		<img src=null class="pagingImg" width="200" height="150" alt="">
    	</div>
    
    </body>
    </html>

  • #5
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Works well.

    Try it here.

    Sciliano. It would be nice if you would comment your code to help us JS-ignorant ones.

    Frank
    Last edited by effpeetee; 06-13-2010 at 02:09 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • Users who have thanked effpeetee for this post:

    Sciliano (06-13-2010)

  • #6
    New Coder
    Join Date
    May 2010
    Posts
    43
    Thanks
    9
    Thanked 0 Times in 0 Posts

    Question

    First of all jmrker, thanks for the reply. I will have a look for image compression and see what I can do, cheers.

    Skychan i'm using .png for images. And I have used photoshop and made the images the exact pixels, some even are 1 pixel wide and have the css stye background-repeat:repeat-x; anyway my page might scroll for 1 second.

    Perhaps I wasnt clear enough, when i said lots of images, i meant the background images that construct the page.

    Sciliano, although that is a really nice effect, and im taking note of the code as we speak this isnt what i mean, I think the question has been misinterpreted. So here's the question refraised.


    Due to the amount of background images on my pages. Is it possible to create a seperate .html document as the landing page on my website, that would have a preloading bar of 0-100% that would load the cache of my site and then redirect to index.html, so the site wouldnt need to load images for the first time as the preloader would have already created the cache.????

  • #7
    Regular Coder
    Join Date
    Nov 2009
    Posts
    247
    Thanks
    4
    Thanked 22 Times in 22 Posts
    Nice demo, Frank. Thanks.

    Sorry, but I'm not a teacher, so I don't place comments within my code. The code I posted is straightforward, don't you agree? waitLoad, doneLoad. Explains itself, IMO.

    Vizard:

    I don't see any benefit to your site visitors in what you suggest. Besides, I've never been to a site that behaves the way you suggest. That's all I need to not pursue your approach.
    Last edited by Sciliano; 06-13-2010 at 02:47 PM.

  • #8
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Sorry, but I'm not a teacher, so I don't place comments within my code. The code I posted is straightforward, don't you agree? waitLoad, doneLoad. Explains itself, IMO.
    I would not know how to alter the load times or the fade-in times. The rest I can sort out though.



    Frank
    Last edited by effpeetee; 06-13-2010 at 02:58 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #9
    Regular Coder
    Join Date
    Nov 2009
    Posts
    247
    Thanks
    4
    Thanked 22 Times in 22 Posts
    Frank:

    The 2 "5"s control it.

    Code:
    nOpacity < 100 ? nOpacity = nOpacity + 5 : doneLoad(nInterval,nLoadImg);
    	 IE ? nLoadImg.style.filter = "alpha(opacity = "+nOpacity+")"
            : nLoadImg.style.opacity = (nOpacity / 100); 
    }, 5)
    The "first" 5, must be a multiple of 100. Larger is faster fade-in.

    The "second" 5 controls the "first" 5. Larger is slower fade-in

  • #10
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Many thanks. I have put a credit for you in the head of the program at my site.

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #11
    New Coder
    Join Date
    May 2010
    Posts
    43
    Thanks
    9
    Thanked 0 Times in 0 Posts
    Sciliano, If you aren't interested in helping me to do this, then dont, i dont mind. I posted here for the help of those who can give it.

    Anyway you said that you've never seen something like that, are you saying you've never seen a site that loads before it moves onto its content?

    I would still appreciate any useful help provided, thanks in advance to all!

  • #12
    Regular Coder
    Join Date
    Nov 2009
    Posts
    247
    Thanks
    4
    Thanked 22 Times in 22 Posts
    Anyway you said that you've never seen something like that, are you saying you've never seen a site that loads before it moves onto its content?
    Never. I've never been to any site, where the only thing I see is a progress bar. If that ever happened to me, I'd instantly hit "Stop." Nobody knows what that progress bar means. Something is being downloaded, and I'm not going to wait until it's finished to see what happens.

    Sorry, but I don't think your approach is a good idea.

  • #13
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    This is a very useful free tool to reduce image size. Several options are returned and you can pick the one that you want.



    Costs nothing to try.

    Frank
    Last edited by effpeetee; 06-13-2010 at 05:00 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #14
    New Coder
    Join Date
    Feb 2010
    Posts
    44
    Thanks
    0
    Thanked 3 Times in 3 Posts
    Vizard-Coder, could you put your site on the web so we could check it out. Sites now a days often take up 500kb- 1mb for everything, all the html, css, js, images and it usually only takes a couple seconds to maybe 6 or 7 seconds to load.

    I wanna see your site in action and see that it loads slowly. Then maybe I can help more. Cuz as it was said, a load bar is a very bad idea.

  • #15
    New Coder
    Join Date
    May 2010
    Posts
    43
    Thanks
    9
    Thanked 0 Times in 0 Posts
    Skychan here is the site, completely unfinished, takes alot of time to create the cache first time http://www.iantaylordesign.com


  •  
    Page 1 of 2 12 LastLast

    Tags for this Thread

    Posting Permissions

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