3

フォルダー内のすべてのファイルを読み取り、それらを返すphpスクリプトに投稿するコードがあります。これらはすべて、imgであり、jqueryは情報を解析します。配列である変数では、各画像がsrcとともにimgオブジェクトとして保存されます。 、width、height、attr、成功したら各画像が読み込まれるかどうかを確認し、最後に別の関数を起動してdivを削除します。しかし、画像が完全に読み込まれたかどうかを確認する方法がわかりません。.completeをいじくり回していますが、読み込まれることはないようです。関数は、imgが読み込まれるまでそのefを呼び出し、その後trueを返します。行きます。これがコードです。これはちょっと面倒で、おそらく良いコーディングではありません。

var gAllImages = [];
function checkFed()

{
    var leni = gAllImages.length;   
    for (var i = 0; i < leni; i++) {


        if (!gAllImages[i].complete) {
            var percentage = i * 100.0 / (leni);
            percentage = percentage.toFixed(0).toString() + ' %';
            console.log(percentage);
            //  userMessagesController.setMessage("loading... " + percentage);
            checkFed();

            return;

        }

    //userMessagesController.setMessage(globals.defaultTitle);
    }
}


 if($('slideshow')){
 var topdiv = '<div id="loading"><div class="centered"><img src="/karlaacosta/templates/templatename/images/ajax-loader.gif" /></div> </div>';
    $('#overall').append(topdiv);
    //console.log('alerta');
    var jqxhr = $.post('http://localhost/karlaacosta/templates/templatename/php/newtest.php', function(data){



        var d = $.parseJSON(data);
        //console.log(d[1]);



        if(typeof(d) == 'object' && JSON.parse){
            var len = d.length;
            //console.log(len);



            for(var i = 0; i < len; i++){
                var theImage = new Image();
                var element = d[i].split('"');
                //        console.log(element);
                //      console.log(element[4]);
                theImage.src = '/karlaacosta/images/Fotografia/TODO'+element[0];
                theImage.width = element[2];
                theImage.height = element[4];                   
                theImage.atrr = element[6];
                gAllImages.push(theImage);

            }





        // console.log(html);
        }else{
            console.log('error');
        }
    }).success(function (){




    setTimeout('checkFed', 150);




    }).error(function(){
        var err = '<div id="error"><h2>Error: Lo sentimos al parecer no se pueden cargar las imagenes</h2></div>';
        $('#loading').append(err);

    }).complete(
        function(){
            var len = gAllImages.length;
            var html = '<ul class="slides">'    
            for(var i = 0; i < len; i++){
                html += '<li><img src="'+gAllImages[i].src+'" width="'+gAllImages[i].width+'" height="'+gAllImages[i].height+'" attr="'+gAllImages[i].attr+'" /></li>';


            }
            html += '</ul>';
            $('#slideshow').append(html);
        }
        );
 jqxhr.complete(function(){
    //
    imageSlide();
    $('#loading').remove();
    //
    console.log('completed');
});
}

checkFed（）の再帰性を取り除くと、明らかにスクリプトが終了し、画像がhtmlに配置されると、画像は正常に高速に読み込まれますが、キャッシュに読み込まれることはありませんか？コードの他の部分でのその他の推測も歓迎します。

4

3 に答える 3

7

各画像がロードされているかどうかを確認し、最後に別の関数を完全に起動して div を削除したいと考えています。しかし、画像が完全に読み込まれたかどうかを確認する方法がわかりません

基本的に、画像の読み込みが成功したかどうかの確認は簡単です。

var theImage = new Image();
var element = d[i].split('"');
$(theImage).load(function() {
    // The image has loaded (from cache, or just now)
    // ...do something with the fact the image loaded...
});
theImage.src = '/karlaacosta/images/Fotografia/TODO'+element[0];

上記の重要なことは、イベントを設定する前loadにイベントをフックすることです。最初に設定し、画像がキャッシュにある場合、次のコード行がそれをフックする前にイベントが発生する可能性があり、見逃してしまいます。srcsrcload

以下に例を示します。ソース

HTML:

<img src="http://www.gravatar.com/avatar/ca3e484c121268e4c8302616b2395eb9?s=32&d=identicon&r=PG">
<p>When you see the image above, 
<input type="button" id="theButton" value="Click Me"></p>

JavaScript:

jQuery(function($) {

  $("#theButton").click(function() {
    var img = document.createElement('img');
    $(img).load(function() {
      display("Image <code>load</code> event received");
    });
    img.src = "http://www.gravatar.com/avatar/ca3e484c121268e4c8302616b2395eb9?s=32&d=identicon&r=PG";
    document.body.appendChild(img);
  });

  function display(msg) {
    $("<p>").html(msg).appendTo(document.body);
  }
});

ご覧のとおりsrc、それぞれのケースで同じ img を使用しています。そして、これまでに試したすべてのブラウザーで確実に、イベントを受け取りますload。

于 2012-05-15T22:20:55.827 に答える
0

ブラウザのキャッシングとイベントモデルの奇妙さのために、プラグインなしでは信頼できるクロスブラウザの方法では実行できません。imagesLoaded または waitForImages を試してください。

https://github.com/desandro/imagesloaded

https://github.com/alexanderdickson/waitForImages

于 2012-05-15T22:01:50.670 に答える