First Picture Takes Too Long To Open [Archive]

Click to See Complete Forum and Search --> : First Picture Takes Too Long To Open

Jaymom

07-26-2008, 09:14 AM

Can someone help with me this problem please. The first time someone opens any of the Philippine pages it takes about 15 seconds for the first picture to appear.

http://www.bolocala.com/

Many thanks ,

Harold

Declan1991

07-26-2008, 10:45 AM

You have nearly 7 Megabytes of images on the page. If you don't preload the images, the browser won't have to download all that before it can begin to show the page.

Jaymom

07-26-2008, 11:42 AM

"If you don't preload the images"...... How do I get around preloading the images? Once you have opened the page once evrthing is fine since it is now in the TIF folder but people not used to waiting for a page to open this long think something is wrong with the link.

Harold

ray326

07-26-2008, 03:21 PM

You need to find you a slide show script that loads each image as it displays the last.

Jaymom

07-26-2008, 05:38 PM

Thanks

WebJoel

07-26-2008, 06:03 PM

"Correct coding" also helps a page to resolve faster to. Many things to pick from, but here's just a smattering:

...<TITLE>Bread of Life Church - Home Page</TITLE>

<style type="text/css">

a:link {color: #000000; text-decoration: none}
a:visited {color: #000000; text-decoration: none}
a:hover {color: #D7362C; text-decoration: none}

<BR>
<br>

</style>

<META NAME="GENERATOR" CONTENT="MAX's HTML Beauty++ 2004">
</HEAD>

<BODY>

<BODY BACKGROUND="http://www.bolocala.com/images/cloudbg.jpg"bgproperties="fixed">

<style type="text/css">body {cursor: url(http://www.members.cox.net/jaymom/cross.ani); }</style><br /><a href="http://www.pimpmyspace.org/myspacecursors.php"></a><br />...

"<br />" (etc) is "HTML" which cannot exist inside of a "embedded CSS", which is what "<style>~</style>" is. It is meaningless, redundant. It does no harm, it does no good, it does *nothing* except add a few superfluous bytes of data to the download time.

Two "<body>" tags: this is a problem. One of them is going to be ignored, perhaps, page-bustingly so.

And last, "<style type="text/css"> body.... (etc.)" can only exist in the "<head>". You have it in the (second)"<body>". It works. Sites sometimes do this (incorrectly). -Browsers are under no obligation to comply (but they usually do)...

I could find quite a few ways to improve the code for faster download without even touching the image/s (which could be optimized and re-used). You could take advantage of the fact that some declarations are inherited, so re-stating them over & over again is not necessary. Example:a:link {color: #000000; text-decoration: none}
a:visited {color: #000000; text-decoration: none}
a:hover {color: #D7362C; text-decoration: none}

"link" style is 'inherited' to the rest of psuedo-link Selectors (visited, focus & hover, and active), so you could get rid of "text-decoration: none;" for every psuedo-state except "a:link {}" -State it once, let it inherit.a:link {color: #000000; text-decoration: none}
a:visited {color: #000000;}
a:focus, a:hover {color: #D7362C;}
says exactly the same thing, but removes two unnecessary instances of "text-decoration: none;" from the page-weight.

(I added "a:focus" to "a:hover". These are the same thing, except no mouse is invoked. -TABs, hotkeys, etc. -Accessibility for the Handicapped issue)..

Jaymom

07-26-2008, 06:06 PM

Now this gives me something to work on. Appreciate it.

Harold

Eye for Video

07-27-2008, 10:32 AM

There have been some good suggestions for your slide show so far, I’d like to add just a few other thoughts.
First, the slide show you are using seems to be resizing the images (looks like from about 741 X 556 pixels) to 1024 X 768 pixels. Problem is, viewers of the slide show are seeing it over the Internet in a Web browser. The browser has toolbars which really cut down the viewing area to about 550-600 pixels vertical. So a 1024 X 768 monitor has a much smaller viewing area unless you want to scroll to see the entire image. Since the slide is set to show for only 3 seconds, that hardly gives me time to scroll around to see the rest of the image. Skip the resizing. Also, any enlarging of the image only degrades the quality by lowering the resolution used to display the image.
My suggestion, use a slide show that displays the images without having to scroll. That means the images should come in somewhere around 741 X 556. Controls on the slide show would be nice, letting me stop at a particularly interesting photo.
The time it takes to download and display the first image really depends on your Internet connection speed. The entire show can be downloaded in short order with a fast connection. Targeting the average speed of your intended audience may mean changing the type of slide show or the size of the various images. Individual images seem to be between about 100KB and 250KB.
Preloading images may be helpful in certain cases but the way that particular slide show is set up, it’s on it’s own Web page, meaning you are taken away from the home page and then load a separate page to display the slide show, which begins to play immediately (leaving no time to preload anything). Preloading any images with the home page would not be helpful because you can not tell which of the 9 slide shows a viewer will select and you certainly do not want to preload the images from all 9.
As the separate slide show page is loaded, the first image is apparently displayed as soon as it is loaded, and then the rest are loaded nonstop after that. The three second display time is sufficient to get the second and third images loaded into the cache before they are displayed. The images are in effect loaded into a buffer (the temp Internet cache) and wait their turn to be displayed (like preloading would do). You can check that out by clicking one of the slide shows to start it and a second or so later, disable your Internet connection (put your cable modem on standby). Check the cache and you can see that a number of images have been downloaded, even though you disconnected after the first image was displayed.
So as it stands now, the main delay seems to come from the size of the first image. One solution, create a intro slide, keep it small (10KB or so). It will load 10 times as fast as a 100KB image, while it displays, the others will be loading.
Better solution, use a slide show with controls that displays without scrolling. Keep the progressive downloading feature or use preloading if you have something to display before the slide show begins and while the slide are loading. Downside to preloading, it will load all the images whether or not the viewer chooses to watch them all. Google for slide shows, lots of them out there. I’m partial to Flash but choose what works best for you. Tied in with an .xml file, it will do exactly what Ray 326 talked about, download the next image, but not necessarily every image in the slideshow.
Best wishes,
Eye for Video
www.cidigitalmedia.com