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=".6.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
function preload(arrayOfImages) {
var temp = $('<img>')
temp.attr("src", ".png")
$('#myGallery').prepend(temp)
var temp = $('<img>')
temp.attr("src", ".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 = ".png";
var img2 = new Image();
img2.src = ".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=".6.4/jquery.min.js"></script>
<script type="text/javascript">
var img1 = new Image();
img1.src = ".png";
var img2 = new Image();
img2.src = ".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>
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./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.colorbos./images/colors/hex-codes/FF9900.png")
$('#myGallery').prepend(temp)
var temp = $('<img>')
temp.attr("src", "http://www.colorbos./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.colorbos./images/colors/hex-codes/003366.png";
var img2 = new Image();
img2.src = "http://www.colorbos./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./ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
var img1 = new Image();
img1.src = "http://www.colorbos./images/colors/hex-codes/003366.png";
var img2 = new Image();
img2.src = "http://www.colorbos./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>
- For troubleshooting purposes, you can open the folder containing the browser cache and delete the images to start from scratch. Totally remove/disable your swap and load the page. To see if the preload function works, check the browser cache to see if the images were loaded. – Sparky Commented Oct 23, 2011 at 21:35
3 Answers
Reset to default 5The 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.colorbos./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.colorbos./images/colors/hex-codes/003366.png")
temp.attr("class", "active")
$('#myGallery').prepend(temp)
var temp = $('<img>')
temp.attr("src", "http://www.colorbos./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;
}
To preload the images, just put this in your initialization (you don't have to wait for document.ready to run this):
var img1 = new Image();
img1.src = "http://www.colorbos./images/colors/hex-codes/003366.png";
var img2 = new Image();
img2.src = "http://www.colorbos./images/colors/hex-codes/FF9900.png"
This will pull the images into the browser cache so they will load quickly when you use them later.
See what jfriend00 said. To answer your followup question, you don't need to reference the img1 and img2 objects. Simply adding another to the page with the same src attribute will make the browser realize that that image is a resource it has already downloaded, and it'll automatically use the preloaded image from its cache.