Home/ Questions/Q 6727357
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T10:02:25+00:00

I’m trying to fade between two images with jQuery. When I did this the

  • 0

I’m trying to fade between two images with jQuery. When I did this the first time there was a blink when the images cross faded the first time. So I tried to preload the images before the fade takes places. However the there is still a blink. Below is a simplified example of the code that still has the blink even with the preloaded images (you should be able to copy and paste it in and have it ‘just work’ to see the issue). How do I make it so that there is no blink? Thank you!

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">                                         

$(document).ready(function(){
    function preload(arrayOfImages) {
        var temp = $('<img>')
        temp.attr("src", "http://www.colorcombos.com/images/colors/hex-codes/FF9900.png")
        $('#myGallery').prepend(temp)

        var temp = $('<img>')
        temp.attr("src", "http://www.colorcombos.com/images/colors/hex-codes/003366.png")
        temp.attr("class", "active")
        $('#myGallery').prepend(temp)

        $(arrayOfImages).each(function(){
        });
    }

    preload();

    $('#switch').click(function(){
        swapImages()
    });

    function swapImages(){
        var $active = $('#myGallery .active');
        var $next = ($('#myGallery .active').next().length > 0) ? $('#myGallery .active').next() : $('#myGallery img:first');
        $active.fadeOut("fast")
        $active.removeClass('active')
        $next.fadeIn("fast").addClass('active');
    }

});

</script>

<style>
    #myGallery{
      position:relative;
      width:100px;
      height:100px;
    }

    #myGallery img{
      display:none;
      position:absolute;
      top:0;
      left:0;
    }

    #myGallery img.active{
      display:block;
    }
</style>

</head>
<body>
  <div id="myGallery"></div>

<input type=button id=switch value=switch>
</body>
</html>

Edit

I did the suggestion of adding 

 var img1 = new Image();
 img1.src = "http://www.colorcombos.com/images/colors/hex-codes/003366.png";
 var img2 = new Image();
 img2.src = "http://www.colorcombos.com/images/colors/hex-codes/FF9900.png"

at the top. However, the first time the fade is done, it still goes from orange to white to blue, instead of orange to blue. The next time the transition is much better with blue to orange and if you click again orange to blue with no brief moment of white.

<html>
 <head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">                                         


var img1 = new Image();
img1.src = "http://www.colorcombos.com/images/colors/hex-codes/003366.png";
var img2 = new Image();
img2.src = "http://www.colorcombos.com/images/colors/hex-codes/FF9900.png"


$(document).ready(function(){

    var temp = $(img1)
    $('#myGallery').prepend(temp)

    var temp = $(img2)
    temp.attr("class", "active")
    $('#myGallery').prepend(temp)

    $('#switch').click(function(){
        swapImages()
    });

    function swapImages(){
        var $active = $('#myGallery .active');
        var $next = ($('#myGallery .active').next().length > 0) ? $('#myGallery .active').next() : $('#myGallery img:first');
        $active.fadeOut("fast")
        $next.fadeIn("fast").addClass('active');
        $active.removeClass('active')
    }

});

</script>

<style>
    #myGallery{
      position:relative;
      width:100px;
      height:100px;
    }

    #myGallery img{
      display:none;
      position:absolute;
      top:0;
      left:0;
    }

    #myGallery img.active{
      display:block;
    }
</style>

</head>
<body>
<div id="myGallery">
</div>
  <input type=button id=switch value=switch>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The reason your 2nd image is not getting preloaded correctly is because it was set to display:none. When the browser sees that it decides its not worth loading the image right away. As has been suggested by others, preload the image exclusively through javascript.

    var img = new Image();
img.src = "http://www.colorcombos.com/images/colors/hex-codes/003366.png";

    You don’t need to ever actually reference the img variable to use the preloaded image, anytime you use the same image url the browser will just pull it from the cache.

    But without changing your method, this is how I removed the blink issue.
    Switch the order of the images being added to the page so that they stack up correctly. and then remove the display:none from the img selector.

    $(document).ready(function(){
function preload(arrayOfImages) {


    var temp = $('<img>')
    temp.attr("src", "http://www.colorcombos.com/images/colors/hex-codes/003366.png")
    temp.attr("class", "active")
    $('#myGallery').prepend(temp)

    var temp = $('<img>')
    temp.attr("src", "http://www.colorcombos.com/images/colors/hex-codes/FF9900.png");
    $('#myGallery').prepend(temp)

    $(arrayOfImages).each(function(){
    });
}

preload();

$('#switch').click(function(){
    swapImages()
});

function swapImages(){

    var $active = $('#myGallery .active');
    var $next = ($('#myGallery .active').next().length > 0) ? $('#myGallery .active').next() : $('#myGallery img:first');

    $active.fadeOut("fast")
    $active.removeClass('active')
    $next.fadeIn("fast").addClass('active');
}

});

    the css

    #myGallery img{
  position:absolute;
  top:0;
  left:0;
}
    • 0