如何在將圖片設置為動畫時使用jquery異步加載圖像

Question

我正在嘗試使用jquery javascript框架異步加載圖像。 加載的圖像完全下載到本地頁面后，應淡入。 到目前為止，我可以異步加載圖像並在固定時間后淡入，而不是在圖像完全下載后消失。 如果圖像太高，這會在淡入淡出時產生一些圖形錯誤，並且由於圖像大小，下載會花費一些時間。 當圖像異步加載時，瀏覽器分配的內存也會逐步增加。 甚至之前顯示的相同圖像也會分配新的內存。

完全下載后，如何異步加載圖像並進行褪色處理。 以及如何加載圖像以確保瀏覽器中沒有內存泄漏。

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

Answer 1

嘗試這個：

 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);
    });
}

Answer 2

www.farinspace.com/jquery-image-preload-plugin/

那個jQuery插件可以滿足您的需求。 每個圖像加載事件都有回調函數，所有圖像加載完成后都有另一個回調函數。

$imgs.imgpreload({
    each: function() {
        // an image loaded, you could fade in each one
    },
    all: function(){                            
        // all images loaded, you could do something else here
    }
});

或者，您可以預加載圖像，以便它們在瀏覽器到達DOM之前就開始下載。

Answer 3

感謝您的代碼示例。 經過一番嘗試，並得到了朋友的進一步幫助，我們開始工作了。 這是代碼：

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

如何在將圖片設置為動畫時使用jquery異步加載圖像

問題描述

3 個解決方案

解決方案1
0 2012-08-18 05:27:50

解決方案2
0 2012-08-18 06:32:03

解決方案3
0 已采納 2012-09-06 20:40:39

如何在將圖片設置為動畫時使用jquery異步加載圖像

問題描述

3 個解決方案

解決方案1 0 2012-08-18 05:27:50

解決方案2 0 2012-08-18 06:32:03

解決方案3 0 已采納 2012-09-06 20:40:39

解決方案1
0 2012-08-18 05:27:50

解決方案2
0 2012-08-18 06:32:03

解決方案3
0 已采納 2012-09-06 20:40:39