View Full Version : help removing possible redundant loads

Sep 12th, 2007, 10:36 PM

I am using a neat postload script to load a bunch of images into the user's cache after the page has fully loaded, and I have a quick question

<script type="text/javascript">
function postLoad(){
var images = new Array('img/EnglishOn.gif',

var loader = new Array();
for(var i=0; i<images.length; i++){
loader[i] = new Image();
loader[i].src = images[i];
window.name = 'preLoad.complete';

Can this script be modified to check whether an image has already been loaded, and if so, not reload it? I ask because I may have a long list of images and if the user navigates to another page I would like the script to not re-download X number of images



I doubt this could be used to post-load .js files... could it?

Edit 2:
would it be possible to add a section (that i could comment out) which would alert me if an image listed in the array could not be located (i.e: i typed in its location wrong). I find that this frequently occurs and I don't realize it until WAY later :).

Sep 13th, 2007, 08:45 AM
The browser checks the cache before loading an image.

function addScript() {
var js = document.createElement('script');
js.setAttribute('type', 'text/javascript');
js.src = 'test.js';

No, the images are in the cache, not part of the DOM. Check the functionality of image replacements.

Sep 14th, 2007, 05:26 AM
Sorry Fang, I don't follow :p

Are you saying that the script I have in fact works as I wanted? That it automatically checks whether an image has been loaded and if so skips it as it iterates through the array?

as for the code you posted, I understand what it does (i think: it basically only loads test.js when the addScript function is called) ... so how could I add it to the post-load script as a second function and have js.src as an array and not a single object?

Sep 14th, 2007, 08:57 AM
previously viewed images won't be loaded automatically, but they will be fetched from the browser's local cache rather than from the remote webserver. So it doesn't skip it as it iterates, but it will be much quicker to load

Sep 14th, 2007, 02:49 PM
GJay has explained your image script.

This is the same as the DEFER attribute for IE browsers
You could load the scripts at anytime if so required.

var deferLoad=['test1.js','test2.js'];
for(var i=0; i<deferLoad.length; i++) {

function addScript(JSfileName) {
var js = document.createElement('script');
js.setAttribute('type', 'text/javascript');
js.src = JSfileName;

Sep 14th, 2007, 03:50 PM
Hi Fang, CJay:

Alright, i understand the image question now :D Thanks,

As for the js loader -- does this script load them after the page has been loaded, or just 'onload' like it would if I set the scripts in the header?

also, i dont see how the two functions you posted work in tandem... or are they two separate ways to do the same thing?

Sep 14th, 2007, 05:24 PM
Scripts in the header are loaded before the body content.

The script given loads 1 or more script files after the whole document has been loaded.
The addScript function can be used at any time to load another script file.

Sep 14th, 2007, 06:36 PM
Hey Fang :)

Thanks for the explanation -- I understand :)

so the <body onload... > function is only called after the entire contents of the <body> has been loaded then? (sounds like a dumb question but I was under the impression it was loaded in parallel with the body contents...)

Dumb little modification but I feel like it will help me a lot:

if i wanted to use the defer loader to load an include, like this:

<? include("includes/slideshow.htm"); ?>

How would I do so? I actually plan to use this because I'm having a load delay problem with the pages that have slideshows

Thanks :D