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

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(){ ... })可以解释该行为的代码。

解决方案：摆脱var并为 any 之外的变量赋值{}：

 <script type="text/javascript">ImageArray = [];</script>
于 2012-05-09T12:52:19.303 回答
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 回答
1

这是一个异步问题。

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

  1. 输入每个函数体
  2. 调用 getImageDimension()
  3. 在 getImageDimension() 中，创建一个图像，并附加一个事件处理程序。就是这样：你的程序继续。
  4. 在每个函数体中，将维度存储在 ImageArray 数组中。在这个时间点，它仍然是未定义的

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

你需要：

  1. 在循环中创建所有图像，并附加您的处理程序。
  2. 等待您的所有处理程序被触发（例如使用计数器）
  3. 现在显示了所有图像，您可以选择它们并获取它们的当前高度。

希望能帮助到你 ！

于 2012-05-09T10:17:09.633 回答
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 回答
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;
         window.ImageArray[i] = {
        'src': ImageSource,
        'title': ImageTitle,
        'height': ImageHeight,
        'id': i
    };
    });

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

    i++;
});
于 2012-05-09T10:21:48.677 回答