• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 302
  • Last Modified:

background image smoother transition


I have an issue with some images on a website i am developing for a hotel, but when i finished the trial version of the home page i noticed that the background changing was really bad. The images are supposed to change every 3 seconds or so, and the transition is supposed to be very smooth, but when i see the page on Firefox 3.6, Firefox 4.0, IE8 or IE9, the transition for some reason y quite slow and rough.

What i need is the appropiate coding so that the images have a smooth transition on the firefox, opera, safari and IE7 and above.


Any ideas?....Thanks a lot
  • 3
1 Solution
on chrome, it looks very smooth, IE looks not as smooth as chrome, though thats got nothing to do with the JavaScript and more to do with the Browser itself.
HainKurtSr. System AnalystCommented:
it is not good on my browser :) sorry... every 3 seconds page is requesting an image from server...
if my connection is slow, then I will wait 10-20 maybe minutes for the image change, you should find something else... precache method for example...
HainKurtSr. System AnalystCommented:
look at this code how I prefetch all images once when page is loaded...

function preloadImage(imagePath) {
  var img = document.createElement('IMG');
  img.src = imagePath;
var maxImg = 8;
for (i=1; i<=maxImg; i++) preloadImage('http://www.grandmare.com/demo/public/img/bghome/bg-' + i + '.jpg');

var ix = 1; 
function changeImage(){
	ix = (ix==maxImg)? 1 : (ix+1); // next image, first one is already displayed
	document.getElementById("myImg").src='http://www.grandmare.com/demo/public/img/bghome/bg-' + ix + '.jpg';
	setTimeout("changeImage()", 3000);

setTimeout("changeImage()", 3000);

<img id=myImg src="http://www.grandmare.com/demo/public/img/bghome/bg-1.jpg">

Open in new window

infogwsAuthor Commented:
Hi, thanks for the answer, i tried the code that you provided and it was the same. Im sending you an screenshot i took of the website on my laptop, where you can clearly see the trouble of the image changing.

The same happens with IE9, but you have to consider that the internet conection in my office is no as fast as it should be. I entered the website from my home and noticed that the issue did not happend, and i have Firefox 4 and IE9 too.

What i need now is a code that optimizes the image changing....or maybe some other solution. Thanks
HainKurtSr. System AnalystCommented:
use flash :) put 8 images inside and transition effect, then there wont be any issues like that...

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now