View Full Version : Cool Page & Javascript general inquiry

11-05-2009, 04:05 PM
I just started using a web wysiwyg program called Cool Pages in addition to Dreamwaever. Cool Pages is a drag and drop style designer & coder. Any html or java components must be added as text within an "object" and placed on the page as a layer behind other elements (tranparent gif, etc).

One one page there is a dynamic drive script for an image gallery in place that functions beautifully, but was loading slowly. As an experiment a separate script for image preloading was added to an object that was placed at the top of the page (they would identify it as the head). It worked, the images load faster.

I am new to javascript and am just stumped. Why does the image preload script work? It is not tied in any way to the existing image gallery script. The image gallery script still calls the images from the same file source location - not referencing the preloaded images at all. It's great that it works, but I don't understand...

Here's the url: http://www.urbanpanda.com/test_code_preload_2.html

I am hoping that someone might have a minute to clarify why this might work. Much gratitude!!♥ :confused:

11-05-2009, 04:35 PM
It doesn't seem particularly fast to me, though I didn't see the 'before' example. But the issue with images is, are they cached? Preloading takes just as long as loading (they're both limited by the bandwidth), and if you are doing both on the same page, may actually take a little longer. Once the images are cached though (which happens after you view the page once), both preloading and loading are almost instantaneous (limited only by the speed of the HD).

What can speed up the loading of images on one page though, even for first time viewers who don't have the images cached yet, is to preload them on a previous page. This should be done either 'onload' of that previous page, or as the very last thing before its closing </body> tag. That way the previous page will appear to load normally, then (more or less in the background - there will be notification from at least some browsers that more loading is occurring) the images for the next page will load. If all goes well, they will be available on the HD when that next page is viewed.

But this will degrade script performance (if any) on this preloading page, until the images have loaded, and if the page you are preloading for is loaded before preloading is accomplished, any image that was not fully preloaded will now have to load and/or preload from the beginning. Also, every time this preloading page loads, it will look for these images again. So even this technique is best used only for a small number of small images.

11-05-2009, 05:43 PM
Thanks for the response. That makes sense. The previous load time was much longer (tested by clearing everything and loading the page from start/run). So, it seems based on the addition of that preload script that it somehow drove a faster page load. I'm just very confused as to how it worked since the image gallery script and the preload script are in no way connected or referenced within each other. Any thoughts?

11-05-2009, 06:51 PM
It may be due to your layout. I've seen this with tables, but generally it doesn't happen with divisions, but yours are absolutely positioned. If the images are loaded, the browser can concentrate on rendering the complex layout. I think this will vary by browser though. If the browser can take any partially loaded images from the preload script and transfer that process in some way (in effect realizing that the particular image is already loading) to the image tag's loading process. This might be speeding things up. Until recently, no browser could do anything like that, so it would take a little longer perhaps. I'm not sure if any browsers can really do anything like that even now, but if any could, I would vote for Firefox, Safari, and Chrome. All of which claim to have enhanced image and script processing.

To answer your other question, as long as there's any real benefit from this, there need not be any connection between the two scripts. Once an image is cached by the browser, it is available from the HD for that page and any other page which uses the image.

It may also be a benefit that your preload script and image tags specify the width and height for each image, this may save some time somehow. It often does as regards the image tags in regard to the rendering of the page, the browser then knows how much space to allot before it even begins loading each image.

But, as I say, I'm still skeptical. Do you have a 'before' page available online somewhere that I may conduct my own comparisons on?

11-05-2009, 07:17 PM
Thanks for the feedback, it is making a lot more sense now. Here is a pre image preload script version: http://www.urbanpanda.com/test_code.html

11-05-2009, 08:10 PM
I'm not noticing any major difference in speed. But the rendering of the thumbnails (which are very small byte-wise as images go), if the browser manages to preload those before it starts rendering them, that part seems more orderly, and doesn't (if they actually preloaded) have to wait for the unseen images to load. If you count load time to include the unseen images (whose downloading is still reported in the status bar), it may actually be faster without preload.

I tested in Firefox 3.5.4 and IE 7. Firefox was faster in both cases and less different between the two versions. IE 7 wasn't able to preload all of the thumbnails, so though more orderly with the preload, the one or two thumbnails it wasn't able to preload in time had to pop into view after the container for the image rendered.

What I think is happening is that since the thumbnails all appear mostly first in the preload and are small, that does help some when it comes time for rendering - if they've actually preloaded. In the non preload page, most of the thumbs (all but the first) have to wait for one or more of the larger images to load before they can start downloading. This isn't exact because 3 is the average number of items that the browser will download at once, but the principal is valid.

You could probably get additional advantage I think by only preloading the thumbs, and by optimizing all the images.

11-05-2009, 08:25 PM
Thank you!!! I really appreciate the time you took to help me better understand this and what steps may help. :D