Question

我有以下内容：

    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未定义，但回调函数中的警报显示高度正常，而不在回调中的警报显示为unfind。

getImageDimensions：

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

Answer 1

代码var ImageArray = [];不会使ImageArray全局化;恰恰相反！由于您指定了var，因此该变量将是定义它的范围的本地变量。

您可能已将代码包装在$(document).load(function(){ ... })中，这可以解释行为。

解决方案：摆脱var并为任何{}之外的变量分配值：

 <script type="text/javascript">ImageArray = [];</script>

Answer 2

似乎是一个同步问题。在查询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');
    };

Answer 3

这是一个异步问题。

尝试重现您的代码行为。假设我们在Images数组中有一个图像。

输入每个功能正文
调用getImageDimension（）
在getImageDimension（）内部，创建一个图像，并附加一个事件处理程序。这就是全部：你的计划还在继续。
在每个函数体中，将维度存储在ImageArray数组中。在这个时间点，它仍然是未定义的

在不久的将来，将调用图像的onload回调，并初始化您的变量。但为时已晚：你的每个功能都已经完成了。

你需要：

循环创建所有图片，并附上处理程序。
等待所有处理程序被触发（例如使用计数器）
现在您的所有图像都已显示，您可以选择它们并获得当前的高度。

希望它有所帮助！

Answer 4

我已经完善了跟踪图像加载的代码，并在准备好时调用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
}

Answer 5

试试这个：

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;
         window.ImageArray[i] = {
        'src': ImageSource,
        'title': ImageTitle,
        'height': ImageHeight,
        'id': i
    };
    });

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

    i++;
});

jquery未定义的全局变量

5 个答案: