0

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

3 に答える 3

0

これを試して：

 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);
    });
}
于 2012-08-18T05:27:50.467 に答える
0

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 に到達する前にダウンロードを開始することもできます。

于 2012-08-18T06:32:03.563 に答える