Image Gallery Pre-Loading Issues

[myyoungfamily]

Hey guys,
I'm working on a gallery script and the issue I'm having is with the pre-loader. Once an image has been loaded and the user has moved on to another and then decides to come back and click an image again, javascript tries to load the image again. It's only a split second blink of a load but it's annoying. Other scripts I've seen, like lightbox, seem to remember if an image has been previously loaded. What am I doing wrong?

Here's my javascript code:

//change the opacity for different browsers
		function changeOpac(opacity, id) {
			var object = document.getElementById(id).style;
			object.opacity = (opacity / 100);
			object.MozOpacity = (opacity / 100);
			object.KhtmlOpacity = (opacity / 100);
			object.filter = "alpha(opacity=" + opacity + ")";
		}

		
		function blendimage(divid, orgimgid, imageid, descid, description, imagefile) {
		
		var speed = 80; //set the time to complete the fade 
		var ease = 75; //set a value to ease the fade ending
		
		fullpath = 'images/full/';
		orgpath = 'images/original/';
		loadingid = 'loading';
		loadingpic = '..images/loading.gif';
		
		// --------------------------------------
		var length = Math.round(speed / 10);
		var timer = 0;
		
		//start to preload the chosen image
		newImage = fullpath+imagefile;
		imgPreloader = new Image();		
		imgPreloader.src = newImage;
		
		//set the current image as background
		document.getElementById(divid).style.backgroundImage = "url(" + document.getElementById(imageid).src + ")";
			
		//make image transparent
		changeOpac(0, imageid);
				
		//change the link to the original image
		document.getElementById(orgimgid).href = orgpath+imagefile;
		
		//change the description
		document.getElementById(descid).childNodes[0].nodeValue = description;
		
		//make the opacity on the loading div 50
		changeOpac(50, loadingid);
		//display the loading div
		document.getElementById(loadingid).style.visibility = 'visible';

			
		// once image is preloaded, resize image container		
		imgPreloader.onload = function(){
			
			//hide the loading div
			document.getElementById(loadingid).style.visibility = 'hidden';
			
			//make new image
			document.getElementById(imageid).src = newImage;
			
			//fade in new image
			for(i = 0; i <= 100; i++) {
			var o = i+((speed/ease)*length);
			setTimeout("changeOpac(" + o + ",'" + imageid + "')",(timer * length));
			timer++;			
			}
			
		}
		}

[jscheuer1]

Well, lightbox v 2.03 uses a slightly different order to things:

		imgPreloader = new Image();
		
		// once image is preloaded, resize image container
		imgPreloader.onload=function(){
			Element.setSrc('lightboxImage', imageArray[activeImage][0]);
			myLightbox.resizeImageContainer(imgPreloader.width, imgPreloader.height);
			
			imgPreloader.onload=function(){};	//	clear onLoad, IE behaves irratically with animated gifs otherwise 
		}
		imgPreloader.src = imageArray[activeImage][0];

But that may or may not have anything to do with what you are talking about. I'd be able to get a better idea and play with alternatives if I saw the whole script, or, better yet, had a link to the live page:

Please post a link to the page on your site that contains the problematic code so we can check it out.

[myyoungfamily]

www.justrpics.com/youngfamily

John,
you'll recognize much of my code...

[jscheuer1]

That's some pretty ugly code. It looks neat enough, but there are undeclared variables, and it doesn't even work in IE or Opera here after the first load of a given large image. What browsers have you been testing in?

The only way I can see to avoid the brief loading display (only happens in FF anyway, once the below mods are made) on already preloaded images would be to not preload them after they are already preloaded. To do that would require some kind of keeping track of which ones have been preloaded already and which have not. I would suggest an array. Also, it would require, skipping the 'loading' display for those images which have already been preloaded, and otherwise executing the rest of the 'onload' code directly after changing the image src of the larger image, without running the onload function for these already preloaded images.

Anyways, without fixing undeclared variables or much else, doing it like so will get it working in Opera and IE, while still working in FF:

		function blendimage(divid, orgimgid, imageid, descid, description, imagefile) {
		
		var speed = 80; //set the time to complete the fade 
		var ease = 75; //set a value to ease the fade ending
		
		fullpath = 'images/full/';
		orgpath = 'images/original/';
		loadingid = 'loading';
		loadingpic = '..images/loading.gif';
		
		// --------------------------------------
		var length = Math.round(speed / 10);
		var timer = 0;
				
		//set the current image as background
		document.getElementById(divid).style.backgroundImage = "url(" + document.getElementById(imageid).src + ")";
			
		//make image transparent
		changeOpac(0, imageid);
				
		//change the link to the original image
		document.getElementById(orgimgid).href = orgpath+imagefile;
		
		//change the description
		document.getElementById(descid).childNodes[0].nodeValue = description;
		
		//make the opacity on the loading div 50
		changeOpac(50, loadingid);
		//display the loading div
		document.getElementById(loadingid).style.visibility = 'visible';

		//start to preload the chosen image
		newImage = fullpath+imagefile;
		imgPreloader = new Image();

		// once image is preloaded, resize image container		
		imgPreloader.onload = function(){
			
			//hide the loading div
			document.getElementById(loadingid).style.visibility = 'hidden';
			
			//make new image
			document.getElementById(imageid).src = imgPreloader.src;
			
			//fade in new image
			for(i = 0; i <= 100; i++) {
			var o = i+((speed/ease)*length);
			setTimeout("changeOpac(" + o + ",'" + imageid + "')",(timer * length));
			timer++;			
			}
			imgPreloader.onload = function(){return;};
		}

		imgPreloader.src = newImage;
		}

[myyoungfamily]

I'll try the enhancments...

Help me out, what are my undeclared variables?

[jscheuer1]

An undeclared variable is any that is first defined within any given scope without the use (directly or indirectly) of the var keyword. So, in your blend function, we have at least these:

fullpath = 'images/full/';
orgpath = 'images/original/';
loadingid = 'loading';
loadingpic = '..images/loading.gif';

to use the var keyword directly in declaring those, would be:

var fullpath = 'images/full/';
var orgpath = 'images/original/';
var loadingid = 'loading';
var loadingpic = '..images/loading.gif';

to use it indirectly, it has to be use directly on at least one previous variable in a comma separated chain of variable declarations:

var fullpath = 'images/full/',
orgpath = 'images/original/',
loadingid = 'loading',
loadingpic = '..images/loading.gif';

or even:

var fullpath = 'images/full/', orgpath = 'images/original/', loadingid = 'loading', loadingpic = '..images/loading.gif';

When one doesn't do this one way or another, the variable is defined in the global scope, and may conflict with other items there, including other variables and elements with id's that match the variable name.

Even if the scope is intended to be global, it should be formally declared with var in the global scope, so as not to conflict with an element. Once declared globally, it can be defined later inside a function without the var keyword and will maintain its new value globally unless later defined again.

The scope of a variable is the level of recognition within a given function or set of nested functions that you need it to have.

var blah='Hi';
function doit(){
alert(blah)
}
doit();

will alert blah from the global scope, or Hi.

var blah='Hi';
function doit(){
var blah='Bye';
alert(blah)
}
doit();
alert(blah);

Now we get Bye as defined in the local scope of the doit() function, followed by a second alert of Hi, from the unaffected global scope.

var blah='Hi';
function doit(){
blah='Bye';
alert(blah)
}
doit();
alert(blah);

This time we get two Bye alerts, because doit()'s blah used the global scope.

[jscheuer1]

See my previous post for a discussion about declaring variables. Here is what appears to be (in limited testing) a workable version of the function with an array to store already preloaded images, and code added to avoid showing the loading display for those so stored (I think I fixed all of the undeclared variables as well):

		function blendimage(divid, orgimgid, imageid, descid, description, imagefile) {
		if (!blendimage.loaded)
		blendimage.loaded=[];
		
		var speed = 80; //set the time to complete the fade 
		var ease = 75; //set a value to ease the fade ending
		
		var fullpath = 'images/full/',
		orgpath = 'images/original/',
		loadingid = 'loading',
		loadingpic = '..images/loading.gif',
		l=false;		
		
		
		
		// --------------------------------------
		var length = Math.round(speed / 10);
		var timer = 0;
				
		//set the current image as background
		document.getElementById(divid).style.backgroundImage = "url(" + document.getElementById(imageid).src + ")";
			
		//make image transparent
		changeOpac(0, imageid);
				
		//change the link to the original image
		document.getElementById(orgimgid).href = orgpath+imagefile;
		
		//change the description
		document.getElementById(descid).childNodes[0].nodeValue = description;
		
		//make the opacity on the loading div 50
		changeOpac(50, loadingid);
		//display the loading div
		
		//start to preload the chosen image
		for (var b=blendimage.loaded, i = b.length-1; i > -1; --i)
		if(b[i]==imagefile)
		l=true;
		if(!l){
		document.getElementById(loadingid).style.visibility = 'visible';
		newImage = fullpath+imagefile;
		imgPreloader = new Image();
		blendimage.loaded[blendimage.loaded.length]=imagefile;
		// once image is preloaded, resize image container		
		imgPreloader.onload = function(){
			
			//hide the loading div
			document.getElementById(loadingid).style.visibility = 'hidden';
			
			//make new image
			document.getElementById(imageid).src = imgPreloader.src;
			
			//fade in new image
			for(i = 0; i <= 100; i++) {
			var o = i+((speed/ease)*length);
			setTimeout("changeOpac(" + o + ",'" + imageid + "')",(timer * length));
			timer++;			
			}
			imgPreloader.onload = function(){return;};
		}

		imgPreloader.src = newImage;
		}
		else {
			document.getElementById(imageid).src = fullpath+imagefile;
			
			//fade in new image
			for(i = 0; i <= 100; i++) {
			var o = i+((speed/ease)*length);
			setTimeout("changeOpac(" + o + ",'" + imageid + "')",(timer * length));
			timer++;			
			}
		}
		}

[myyoungfamily]

WOW, Thanks for the help John.

I pasted in you code and it works great but it doesn't seem to be remembering the pre-loading. Your code is live on my site www.justrpics.com/youngfamily if you want to see it.

[jscheuer1]

Well, it seems to work on your site from here, did you try clearing your browser's cache? And, you never did tell me what browser you were using.

I do see a jumpiness still in FF, but no display of the loading image or of the word 'loading' once an image has been cached once. I'm looking at your wallpaper page only, for the time being.

[myyoungfamily]

Ok, I think we're close. I've been viewing it in FF because that seemed to be where the problem was. Safari and Opera look good. I think the jumpiness has something to do with the image size. I'm gonna see if I can nail that down. Thanks again for the help with the pre-loader.