...

View Full Version : A Bit Of Advice!



Vizard-Coder
06-13-2010, 04:14 AM
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!

jmrker
06-13-2010, 05:07 AM
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! :)

Skychan
06-13-2010, 05:32 AM
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.

Sciliano
06-13-2010, 12:13 PM
Vizard-Coder:

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


<!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>

effpeetee
06-13-2010, 12:33 PM
Works well.

Try it here. (http://exitfegs.co.uk/Fadeinimageloader.html)

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

Frank

Vizard-Coder
06-13-2010, 01:17 PM
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.????

Sciliano
06-13-2010, 01:34 PM
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.

effpeetee
06-13-2010, 01:48 PM
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

Sciliano
06-13-2010, 02:50 PM
Frank:

The 2 "5"s control it.


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

effpeetee
06-13-2010, 03:01 PM
Many thanks. I have put a credit for you in the head of the program at my site. (http://exitfegs.co.uk/Fadeinimageloader.html)

Frank

Vizard-Coder
06-13-2010, 03:05 PM
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!

Sciliano
06-13-2010, 03:18 PM
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.

effpeetee
06-13-2010, 03:56 PM
This is a very useful free tool to reduce image size (http://tools.dynamicdrive.com/imageoptimizer/). Several options are returned and you can pick the one that you want.



Costs nothing to try.

Frank

Skychan
06-13-2010, 07:12 PM
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.

Vizard-Coder
06-14-2010, 04:34 PM
Skychan here is the site, completely unfinished, takes alot of time to create the cache first time http://www.iantaylordesign.com

Skychan
06-19-2010, 01:43 AM
It loaded up in like 2 or 3 seconds. Completely normal. That was the first time I'd ever been to that site, so I know I didn't have it cached.

Nothing to worry about. If you are on old school dial connection then I would expect it to take 20 seconds or longer to load, that's just what you get if you are still on dial up. The web is built for high speed internet these days.

So, unless you can show me a scenario where it takes much longer to load then I'm not going to dig into why your site is overbloated at this point.

Btw, there is no reason to use 2 separate pages like you wanted to if you want to give the user a progress bar... you would simply have a progress bar image and code at the top of your page (so it gets loaded first and quickly) and it would move along until the rest of the page loads up.

But like I said, not needed cuz it loads really fast, and a progress bar would look terrible and drive users away. If a site takes longer than 7-10 seconds to load on a high speed connection, then many users (including myself) will leave even if the information I require is there... I will go find the info somewhere else.

P.S. Your site looks awesome! It's a very nice design, looks beautiful! Keep up the hard work!

Skychan
06-19-2010, 02:08 AM
I read your home page now and I can't help but do a little bit of proofing:

"First of all welcome to my online portfolio and thank you for taking the time to read this. Time to introduce myself. My name is Ian Taylor and I'd like to believe im a Web Designer."

I don't like this introduction at all. "Time to introduce myself." is a sentence that I think should be removed. I don't like how it starts off with "First of all". I would just start with "Welcome..." and I wouldn't say "thanks for taking the time to read this" ... as I read that I felt my time being wasted away reading those words... I wanted to get to the "meat" of what you were trying to get across. What I mean by "meat" is the good stuff; the stuff that explains what your site is about and who you are. Thanking me is useless and if I wasn't the kind of ridiculous person who tends to read to the end of any paragraph I start reading I would not have continued.

Also, It's reaaally not a good idea to state that you'd like to believe you are a web designer... you need to have confidence and not give me any reason to think that you AREN'T a web designer... if I'm gonna hire you I want to know that you ARE a web designer, not just possibly believing you are one. You need to state that you ARE a web designer and then go on to give me evidence of such (the web site is doing a very good job of providing this evidence).

After this introduction I feel like the rest is pretty good. You could probably do a bunch of tiny little tweaks here and there. Anything I ever write that I want to be a professional document (resume, website content, etc) I usually end up tweaking numerous times with the help of others. Get someone who is very good at literacy to help you. I'm no better than moderately good at writing and literacy.

More positive feedback to you is that I did enjoy your casual way of talking in your "The Future" paragraph.

" So I have recently decided that getting a Web Designer/Developer job would be more beneficial to me in the future than going to University"

I think it would be better to say something more concrete that doesn't involve the word "recently" (cuz ppl change their decisions quickly, so if I'm gonna hire you I would rather know that this has been your plan for a very long time, or else don't tell me that you only recently made this decision) and that doesn't compare getting a job now vs going to university... though ask your friends and colleagues about this part because maybe I'm wrong. I just think it would be better to not list alternative paths. My opinion is that you should just state your plan: You want to get a web design job (by stating this w/o alternative plans like University you sound more passionate... this IS the path you ARE going to take!!! nothing else matters! :) ) and your next sentence about friends in the same field is good cuz it shows your passion and it shows that you've seen what the field looks like and have decided that it's the right path for you.... ok sorry for droning on and on... I'm ultra terrible at being concise.

"When I designed this, I kept in mind colours whilst also retaining enough white space to give the design a "clean" look."

Change "whilst" to "while" (this remains grammatically correct, but more natural to say/read and more normal). I also suggest that you remove the quotes around "clean" because the word has a very clear meaning and it's context makes it very clear what you mean. Putting quotes around a word like that is only lame in my opinion and serves no point. It's fine to put quotes around a word when you intend to give the meaning that it is not a truth, like when you say "Bob called in "sick" today even though I saw him at the mall 20 minutes ago." See how I quoted "sick" only because it was a non-truth (oh and this is an example of a verbal sentence where you use your fingers to quote the word, lol).

Anyway, all of this is just my opinion and is completely up for debate. I suggest you get others to proof read your work and take my suggestions into consideration.

Best of luck!

Skychan
06-19-2010, 02:15 AM
Also forgot:

"Jet Stream Studios was a design I created for as a Web Devlopment company."
change to
"Jet Stream Studios was a design I created for a Web Development company."

Removed "as" and corrected spelling of "Development"

Anyway, sorry for tearing your content apart, I realize your site isn't done. I'm sure you'll put in the effort to fix it all up. At least I didn't see any design flaws during my quick glance *thumbs up*

Best of luck!

Old Pedant
06-19-2010, 03:04 AM
Hmmm...


My name is Ian Taylor and I'd like to believe im a Web Designer.

im? Who or what is "im"??

You got "I'd" correct, why'd you mess up on "I'm"??

And what about

and I find myself thinking its time to get out there
That should be "it's" or really spell it out all the way as "it is" (more elegant feel to it).

There are many other grammar and punctuation errors in your expanded text.

Mind you, geeks aren't know as the best practitioners of English, but nevertheless you don't want to appear ignorant of the fundamentals.

Luckily, in today's world you have an easy way out: Might I suggest that you copy/paste your text into a word processor (yes, such as MS Word or equivalent) and let it check for spelling and/or grammar errors? It likely won't catch all of them, but it should find many egregious ones.

***********

I agree, the site loaded quite fast. I don't know why/if you are worried about that. You needn't be.

***********

You've been in "high school" since 2002???? How old are you? High school in the USA is only 3 or 4 years, from 14 or 15 years old through 17 or 18.

Vizard-Coder
06-19-2010, 08:20 AM
Haha Skychan your right, my content did get ripped apart, but at the same time, it's not a finished product.

I Will correct those errors right away, thanks for pointing them out to me.

Old Pedant, when I say high school, it's a term for secondary school here in England, so perhaps I should change it to Secondary School.

Thanks for all the help guys and if you think it loads fast enough, then that's good enough for me!

Old Pedant
06-20-2010, 12:41 AM
high school, it's a term for secondary school here in England
You'll love this: "secondary school" and "high school" are used interchangably here in USA, so that would still mean ages 14 to 17 or so. LOL! Put that under your bonnet and smoke it. <grin/>

I *think* that what you are referring to is what we would term "junior college" or "community college," which are typically for 18 to 20 year olds, but again, because of the "community" nature, can be attended by people of all ages (my wife *started* community college the year after our elder son did).

Vizard-Coder
06-20-2010, 03:12 AM
To be honest, I can't be bothered explaining the schools system in England, so thats that.

Skychan
06-20-2010, 09:12 AM
post-secondary school is anything after mandatory (free) education (in North America): ie university/college

Philip M
06-20-2010, 09:43 AM
To be honest, I can't be bothered explaining the schools system in England, so thats that.

Vizard-Coder - You were glad enough that people bothered to look into your question.

Old Pedant - for more info see
http://en.wikipedia.org/wiki/High_school

Vizard-Coder
06-21-2010, 12:10 PM
Okay, maybe I was harsh. But it just seemed that he was determined to be right, anyway it is a coding forum, not an education forum.

Philip M
06-21-2010, 12:17 PM
Okay, maybe I was harsh. But it just seemed that he was determined to be right, anyway it is a coding forum, not an education forum.

You should remember that you may want to come back to this forum again for further assistance in the future. It is not very sensible to alienate people who you hope will volunteer to spend some time helping you out. I recall that in the past several have made that mistake.

If I may make a gratuitous comment, if you elect not to go to university you are in effect ruling yourself out of the employed-jobs sector. With a surfeit of graduates no employer will take on someone who is unqualified. So you are electing for self-employment. That may well be a rewarding choice, but it requires not only technical skill but also a very high level of inter-personal skills if you are to appeal to and retain customers (who have plenty of choice). Brusque or dismissive behaviour (or a reputation for same) will be as damaging as technical incompetence. Just a thought.

ctoz
06-21-2010, 12:28 PM
http://articles.sitepoint.com/article/review-dont-think

Best advice I ever read: take out half your copy; then do that again. ... It'll load a bit quicker, too
;)


Best of luck!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum