background image smoother transition

Posted on 2011-05-03
Last Modified: 2012-05-11

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
Question by:infogws
    LVL 5

    Expert Comment

    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.
    LVL 51

    Expert Comment

    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...
    LVL 51

    Accepted Solution

    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('' + i + '.jpg');
    var ix = 1; 
    function changeImage(){
    	ix = (ix==maxImg)? 1 : (ix+1); // next image, first one is already displayed
    	document.getElementById("myImg").src='' + ix + '.jpg';
    	setTimeout("changeImage()", 3000);
    setTimeout("changeImage()", 3000);
    <img id=myImg src="">

    Open in new window


    Author Comment

    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
    LVL 51

    Expert Comment

    use flash :) put 8 images inside and transition effect, then there wont be any issues like that...

    Featured Post

    How to run any project with ease

    Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
    - Combine task lists, docs, spreadsheets, and chat in one
    - View and edit from mobile/offline
    - Cut down on emails

    Join & Write a Comment

    Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
    Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
    In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
    In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…

    745 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    17 Experts available now in Live!

    Get 1:1 Help Now