1

画像を読み込む前に、画像が存在するかどうかを確認するためにajaxを使用しようとしています。私はそれをほとんど機能させていますが、エラー内の変数を設定しています:そして成功:ajaxのタグであり、それは私のimg変数を変更していません。これらのタグを介して残りの機能を実行する方法はありますか?

function getImage(imageNum)
{
var img;
$.ajax({
    url:imageLocation + imageNum + '.png',
    type:'HEAD',
    error: function()
    {
        img = 0;
    },
    success: function()
    {
        var img = $('<img />', {
            src: imageLocation + imageNum + '.png',
            class: 'image',
            id:'image' + imageNum});
        return img;
    }
});
console.log(img);
return img;
}

了解しました。AJAXを使用する理由がない場合は、画像タグのみを使用します。問題は、変数が関数内で何かを変更していないことです。これが例です。

function getImage(imageNum)
{
    var img;
    var success = 10;
    var img = $('<img />', {
        src: imageLocation + imageNum + '.png',
        class: 'image',
        id:'image' + imageNum,
        success: function () { 
            success = 1
        },
        error: function () { 
            success = 0;
        }
    });

    console.log(success);
    if(success = 1)
        return img;
    else
        return 0;
}

function loadImage(imageNum)
{
    var img = getImage(imageNum);
    if(img != 0)
    {
        $('#slider').imagesLoaded( function () {
            $("#slider").append(img);
            loadImage(imageNum + 1);
        });
    }
    else
        return;
}
4

3 に答える 3

2

$ .ajaxは非同期であるためconsole.log、呼び出しが完了する前に呼び出しています。コードが同期している場合、このように戻ることはできません。

代わりに、success()内で他のコードを呼び出す必要があります-例:

$.ajax({
  url: '',
  data: '',
  success: function(data){
      codeThatNeedsImg(data);
  }
  });

function codeThatNeedsImg(img){
   console.log(img);
}
于 2012-07-11T21:59:04.727 に答える
0

<img>画像自体が読み込まれるまで要素を追加しないだけの場合は、それを実行してください。要素を作成し、<img src="..." />まだDOMに追加しないでください。ブラウザに画像ファイルの取得を試みるように促します。成功イベントリスナーとエラーイベントリスナーを、それぞれの結果に対して起動する要素自体にアタッチできます。

成功イベントが発生した場合は、画像が存在することを知っています。また、画像がすでにプリロードされていることを知っているので、今すぐDOMに追加できます。存在しない場合、呼び出しはより早く戻り、エラーイベントはオーバーヘッドなしで発生します。ウィンウィンだと思います。

srcイベントコールバック関数の要素の属性を読み取るだけで、どの画像であったかを確認できます。

ロジックを使ったフィドルの例を次に示します。http://jsfiddle.net/jZpNj/

于 2012-07-11T22:09:24.093 に答える
0

さて、私はついに私の問題の解決策を見つけました。@bokonicはajaxについてほぼ正しかった。私はajaxを使い続けたので、success呼び出しを使用でき、エラー呼び出しが'success'変数を変更してループを終了するのを待っている間、画像を追加しませんでした。それを待っている間、それは約3つの余分な画像を追加します。画像の読み込みから成功することは決してないので、それはajaxだけのものだと思います。こんな感じです。

function loadImage(imageNum)
{
    $('#slider').imagesLoaded( function () {
        if(success)
        {
            $.ajax({
                url:imageLocation + imageNum + '.png',
                type:'HEAD',
                error: function()
                {
                    success = false;
                },
                success: function()
                {
                    var img = $('<img />', {
                        src: imageLocation + imageNum + '.png',
                        class: 'image',
                        id:'image' + imageNum
                    });
                    $('#slider').append(img);
                    loadImage(imageNum + 1);
                }
            });
        }
        else
            return;
    });
}
于 2012-07-12T17:40:11.663 に答える