How to load image asynchronously using jquery while animating pictures as screenshot
Question
I'm trying to load an image asynchronously using jquery javascript framework. The loaded image should be faded in when it's completely downloaded to local page. By now I'm able to asynchronously load an image and fade it in after a constant time not when its completely downloaded. This produces some graphical errors while fading if image is tall and download takes a moment of time because of image size. Also the memory allocated by the browser is increasing step by step when a image is loaded asynchronously. Even the same images shown before allocates new memory.
How can I load an image asynchronously and do some fading when it's completely downloaded. And how do I have to load the image to get no memory leak in my browser.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<title>jQuery demo</title>
</head>
<body>
<script src="jquery-1.8.0.min.js"></script>
<script src="jquery.timer.js"></script>
//<script src="jquery.center.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<div class="hide">
<img id="bild" height=100% src="logo.jpg" alt="Logo" />
</div>
<script>
var timer = $.timer(function()
{
var img = $('#bild').attr('src','http://localhost/test.php?'+(new Date()).getTime()).load(function()
{
if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) {
$('#bild').attr('src','logo.jpg'); //Show logo in error case
} else {
$("#div.hide").append(img);
}
}).stop(true,true).fadeIn(1000).delay(3000).fadeOut(1000);
});
$("#bild").error(function()
{
$('#bild').attr('src','logo.jpg');
});
timer.set({ time : 5000, autostart : true });
</script>
</body>
</html>
3 answers
solution1
0 2012-08-18 05:27:50
Try this:
if($('#bild').prop('complete')) // if image is already in cache
{
// your code
$(this).fadeIn(1000).delay(3000).fadeOut(1000);
}
else{
$('#bild').load(function(){ // works when image is loaded and not present in cache
// your code
$(this).fadeIn(1000).delay(3000).fadeOut(1000);
});
}
solution2
0 2012-08-18 06:32:03
www.farinspace.com/jquery-image-preload-plugin/
That jQuery plugin will do what you're looking for. You have callback functions for each image load event, then another callback for when all images are done loading.
$imgs.imgpreload({
each: function() {
// an image loaded, you could fade in each one
},
all: function(){
// all images loaded, you could do something else here
}
});
alternatively you can preload the images so they start downloading before the browser reaches them in the DOM.
solution3
0 ACCPTED 2012-09-06 20:40:39
thanks for your code examples. After some tries with it and some further help from a friend we get it working. Here is the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<title>jQuery demo</title>
</head>
<body>
<script src="jquery-1.8.0.min.js"></script>
<script src="jquery.timer.js"></script>
//<script src="jquery.center.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<div id="imageWrapper" class="hide">
<img id="bild1" style="height: 100%;" src="logo.jpg" alt="Logo" />
<img id="bild2" style="height: 100%; display: none;" src="logo.jpg" alt="Logo" />
</div>
<script>
setImage($('#bild2'));
var timer = $.timer(function()
{
var visible = $('#imageWrapper img:visible');
var hidden = $('#imageWrapper img:hidden');
if (!hidden[0].complete || typeof hidden[0].naturalWidth == "undefined" || hidden[0].naturalWidth == 0)
hidden.attr('src','logo.jpg'); //Show logo in error case
if(hidden.attr('src')!= visible.attr('src'))
{
visible.fadeOut(1000, function() {
setImage(visible);
hidden.fadeIn(1000);
});
}
else
setImage(hidden); //don't fade if current and next picture are the same (e.g. error pic -> error pic), but try to set new image
});
$("#imageWrapper img").error(function()
{
$(this).attr('src','logo.jpg');
});
timer.set({ time : 5000, autostart : true });
function setImage(img)
{
img.attr('src','http://localhost/test.php?'+(new Date()).getTime());
}
</script>
</body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.