Home/ Questions/Q 8485847
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-10T20:45:54+00:00

I’m trying to load an image asynchronously using jquery javascript framework. The loaded image

  • 0

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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>
    • 0