Question

我得到的图像尺寸（宽x高）。图像的位置是URL。我试过类似下面的代码块

var constants: {
       standImgDim: {
           small: '200x200',
           mid: '400x400'
       }
    };

this.getImgDim = function(targetImg) {
        var width=0, height=0, setStyleWidth = 0;
        $("<img/>")
            .attr("src", targetImg)
            .load(function() {
                width = this.width;
                height = this.height;
                var gotDim = width+'x'+height;

                    console.log(gotDim);
            });
   console.log('data');

    };

当前输出：

data
200x200

预期产出：

200x200
data

我知道结果是由异步行为引起的......

我也试过$ .Deferred ..但它不会工作。因为我没有使用ajax（如下所示）

var deferred = new $ .Deferred（）;

 $.ajax({
                    type: "GET",
                    url: targetImg,
                    dataType: "image/jpeg"
                }).done(function(data) {
                    deferred.resolve(data);
                }).fail(function(error) {
                    deferred.reject(error);
                });

                return deferred.promise();

有没有办法以同步方式/其他方式进行？

Answer 1

在加载函数中添加回调：

this.getImgDim = function(targetImg, callback) {
        var width=0, height=0, setStyleWidth = 0;
        $("<img/>")
            .attr("src", targetImg)
            .load(function() {
                width = this.width;
                height = this.height;
                var gotDim = width+'x'+height;

                    console.log(gotDim);

                callback();
            });


    };

this.getImgDim('targetImage', function () {
       console.log('data');
});

async是唯一的函数.load所以回调允许的是，代码有点回到同步上下文，如果你需要访问一些变量或者一些输出数据的加载函数，你可以通过回调传递它。

我认为您甚至可以通过以下方式传递上下文：

callback.bind(this);

获取图像大小时绕过异步

1 个答案: