Decrease jumpiness in photo transitions

[bradyg23]

I'm using the Javascript technique found in the banner of http://www.visitbradford.com/ on a project that I'm currently working on. Like the Bradford site, however, the results are a bit jumpy between pictures.

Unfortunately I'm not strong enough in Java skills to resolve this. Can anyone offer a suggestion as to how to make the transition more smooth?

[floater]

Jumpy? I thought that my browser had crashed. Navigating in that site took an extra ten seconds no matter what I was trying to do.

When I try to look at the javascript in Firebug I get:

Failed to load source for: http://www.visitbradford.com/scripts/hp-random.js

How did you manage to see the javascript code they are using?

I strongly suggest caching image files when the page is loading. You can check this out for more info on caching:

http://www.pageresource.com/jscript/jpreload.htm

Ideally, everything the webpage needs should be loaded with the webpage itself. The exception being responding to user submitted data. For example, when using Google Maps you choose the spot you want to look at and then you wait while the server sends that information. In that context most people expect to wait. The designers of the visitbradford site have made a pretty site but I expect most visitors to the site will leave (or try to) before it loads.

If you have access to the javascript code used on that site I would strongly recommend using something else.

(just my 2 cents...)

[bradyg23]

When I clicked on the link to the js file that you posted it gave me options to Save or Open. I saved it, and then loaded it in Dreamweaver. The page homepage there loads great for me, and I had no issues navigating in IE or Firefox, but there just seems to be a flash with each photo transition. The code is listed below if you see anything that may help.

Thanks!

// JavaScript Document
/* ################################ GENERIC RANDOM BACKGROUND IMAGE ############################## */
/* This function changes the background image of the header, if no Javascript leaves the defaut in */
function ChangeCSSBgImg() {
	if (!document.getElementById) return false;
	
	var MyElement = "header" //The ID of the element you want to change
	var ImgPath = "http://mediafiles.thedms.co.uk/publication/ys-brad/headers/" //The file path to your images
	
	if (!document.getElementById(MyElement)) return false;
	
	var random_images = new Array ();
	random_images[0] = "header-home.jpg";
	random_images[1] = "header-home2.jpg";
	random_images[2] = "header-home3.jpg";
	random_images[3] = "header-home4.jpg";
	random_images[4] = "header-home5.jpg";
	random_images[4] = "header-home6.jpg";
	
	
	
	var $header = document.getElementById(MyElement);
	var $backgroundurl = $header.style.backgroundImage;
	var ImgURL = "url(" + ImgPath + random_images[rand(random_images.length)] + ")";
	
	if ($backgroundurl != ImgURL) {
		$header.style.backgroundImage = ImgURL;	
	}
	
	movement = setTimeout("ChangeCSSBgImg()",19000);
}

/* random number generator */
function rand(n) {
  return ( Math.floor ( Math.random ( ) * n ) );
}

/* Custom onload function */
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      oldonload();
      func();
    }
  }
}
/* trigger onload */
addLoadEvent(ChangeCSSBgImg);

[floater]

Hi,

Thanks for the code. I checked out the site again and this time it was much smoother with no problems navigating... What's up with that?

When you load the page does it show you a landscape picture with some trees and purple flowers? The page loads and then picture changes to something else? Is this the transition that is the problem?

Other transitions follow this. These other transitions seem clean though they are very fast.

So, I believe what is happening is:
1. When the page loads the trees and purple flowers image is loaded and displayed as the CSS background image to the header div.
2. The javascript onload event triggers the code to change the CSS background property to a background from another URL.

The browser is not handling this first transition well but the transitions that follow it seem okay. In order to smooth out the transitions I would recommend caching the images before attempting the transition. Also, rather than triggering the transition when the page loads it may help to wait a few seconds.

Anyway, I hope it works. If not let me know...

Floater

There should be plenty of tutorials on caching images out there. Let me know if finding one you can use is an issue.

As for delaying the first transition just change:

addLoadEvent(ChangeCSSBgImg);

to

addLoadEvent(setTimeout("ChangeCSSBgImg()",5000);

This will provide a 5 second pause. Between those two things I think it should work.

...Famous last words...

[bradyg23]

I tried adding in the following line:
addLoadEvent(setTimeout("ChangeCSSBgImg()",5000);

In Dreamweaver it says I have a syntax error the moment I enter in the (). When I test the file the images don't show up with this line of code entered. Is there something that should be changed?

[bradyg23]

I used your suggestion on caching the images and it looks MUCH better now. For anyone who may stumble on this post in need, I used the code for caching images found at:
http://www.pageresource.com/jscript/jpreload.htm

Many thanks Floater!

[tahirjadoon]

I did some thing similar for a friend (site not up yet) but then at the end used this jquery plugin, can't this be more efficient for what you are trying to accomplish?
http://www.malsup.com/jquery/cycle/

[floater]

I'm glad that the caching has worked for you. I tried the code I suggested and it did not work... -My Bad- Regardless I made a few simple changes and it worked on my machine...

Change #1: Add this function:

function wait() {
setTimeout("ChangeCSSBgImg()",6000);
}

Change #2: the addLoadEvent should be:

addLoadEvent(wait); // instead of addLoadEvent(ChangeCSSBgImg);

The "6000" in the wait function will delay the first changing of the background by 6 seconds. Thus, if you have a default background image it would be displayed for 6 seconds before a new background image replaces it. With the images cached the changes should not be "jumpy."

To tahirjadoon:
The Jquery image cycling you suggested looks very nice. Jquery makes things so easy... It appears to be cycling the images though, not the backgrounds. In this case I think it would be easier to modify the javascript... (just my 2 cents)

cheers to all,
floater

[tahirjadoon]

Floater, just to clear my concept, can't we cycle the images via cycle plugin and then put the rest of the content above the "image div in which we are cycling the images" with position absolute and z-index?

[floater]

Hi tahirjadon,

I only looked at the Jquery code briefly but from what I saw it was changing images, not the backgrounds of a given <div> I do not know why the creators of the bradford site chose to do it this way but they did.

Based upon the request I felt (perhaps incorrectly) that the easiest way to address the problem would be to take the javascript code and modify it.

Your suggestion regarding using images and z-index should work. That said it would be necessary to modify the HTML and the CSS it is important to test it.

floater