0

私は次のものを持っています：

    var ImageArray = [];
    var Images = $('#ImageSelection').children('img');

    var i = 0;

    Images.each(function() {
        var ImageSource = $(this).attr('src');
        var ImageTitle = $(this).attr('alt');
        var ImageHeight;
        getImageDimensions(ImageSource, function(data) {
            ImageHeight = data.height;
            alert(typeof ImageHeight + ' ' + ImageHeight);
        });
        alert(typeof ImageHeight + ' ' + ImageHeight);
        $(this).attr('id', i);
        ImageArray[i] = {
            'src': ImageSource,
            'title': ImageTitle,
            'height': ImageHeight,
            'id': i
        };
        i++;
    });

このコードを実行した後、ImageArray[0].heightは未定義ですが、コールバック関数のアラートは高さを適切に表示し、コールバックにないアラートはundefindを表示します。

getImageDimensions：

    function getImageDimensions(path, callback) {
        var img = new Image();
        img.onload = function() {
            callback({
                height: img.height
            });
        }
        img.src = path;
    }
4

5 に答える 5

3

コードはグローバルにはなりvar ImageArray = [];ません。ImageArrayまったく逆です！を指定varしたため、変数はそれが定義されたスコープに対してローカルになります。

$(document).load(function(){ ... })動作を説明するコードがラップされている可能性があります。

解決策: を取り除き、varany 以外の変数に値を代入します{}。

 <script type="text/javascript">ImageArray = [];</script>
于 2012-05-09T12:52:19.303 に答える
1

画像の読み込みを追跡し、準備ができたら processAfterLoading を呼び出すようにコードを改良しました

var Images = $('#ImageSelection').children('img');
// new introduced Image-Load-Counter
var ImagesToLoad=Images.length;
var ImageArray = [];
var i = 0;

Images.each(function() {

    $(this).attr('id', i);

    getImageDimensions($(this), function(data) {
        var ImageHeight = data.height;
        alert(typeof ImageHeight + ' ' + ImageHeight);

        ImageArray[data.id] = {
            'src': data.src,
            'title': data.title,
            'height': data.height,
            'id': data.id
        };
        // Keep track of the amount of images to load before working with ImageArray
        ImagesToLoad--;
        if (ImagesToLoad<1) processAfterLoading()
    });

    i++;

});

function getImageDimensions($img, callback) {
    var img = new Image();
    img.onload = function() {
        callback({
            id: $img.attr('id'),
            height: img.height,
            src: $img.attr('src'),
            title: $img.attr('alt')
        })
    };
    img.src = $img.attr('src');
};

function processAfterLoading() {
    // Do ALL the things with ImageArray
}
于 2012-05-11T10:14:04.687 に答える
1

シンクロニシティの問題のようです。ImageHeight を照会している間、コールバックはそれを設定していません。コールバック関数で ImageArray[i] を設定する必要があります。

次のコードが機能するはずです。

    var Images = $('#ImageSelection').children('img');
    var ImageArray = [];
    var i = 0;

    Images.each(function() {

        $(this).attr('id', i);

        getImageDimensions($(this), function(data) {
            var ImageHeight = data.height;
            alert(typeof ImageHeight + ' ' + ImageHeight);

            ImageArray[data.id] = {
                'src': data.src,
                'title': data.title,
                'height': data.height,
                'id': data.id
            };
        });

        i++;

    });

    function getImageDimensions($img, callback) {
        var img = new Image();
        img.onload = function() {
            callback({
                id: $img.attr('id'),
                height: img.height,
                src: $img.attr('src'),
                title: $img.attr('alt')
            })
        };
        img.src = $img.attr('src');
    };
于 2012-05-09T10:16:56.230 に答える