访问从 jQuery 加载返回的数据答案

【问题标题】：Accessing returned data from jQuery load访问从 jQuery 加载返回的数据
【发布时间】：2017-06-11 17:45:01
【问题描述】：

我正在开发一个 vue.js 组件，我有这个计算属性：

 loading_asset_status(){
        var img = $("img.modal-main-image").attr('src', this.current_image.img_url)
            .on('load', function() {
               return (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0);
            });
        return img;
    }

计算属性需要返回从加载函数返回的 true 或 false，但 img 变量包含 jQuery DOM 对象，而不是我想要的 true 或 false。所以这不起作用。

我也试过这个：

loading_asset_status(){
        var status;
        var img = $("img.modal-main-image").attr('src', this.current_image.img_url)
            .on('load', function() {
                status = (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0);
            });
        return status;
    }

但是这个返回未定义。任何想法如何解决它？

【问题讨论】：

标签： javascript jquery vue.js

【解决方案1】：

它没有返回状态，因为这是异步的，你甚至在 .on 内的代码仍在执行之前就返回了。

但是，您可以像这样设置数据变量：

loading_asset_status(){
        var img = $("img.modal-main-image").attr('src', this.current_image.img_url)
            .on('load', () => {
                this.status = (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0);
            });
    }

您必须在 vue 实例的数据部分中定义状态。

【讨论】：

我真的不明白我该怎么做。也许我对这件事的态度非常错误。我想要实现的是 facebook 之类的图像模式，用户可以在其中浏览图库、评论照片等。所有这些都很容易，但我找不到任何其他方式让我的组件知道是否加载了请求的图像。然后我只是显示我的加载图标。 Vue 有没有比 jQuery 更好的方法？
@ElDanielo，正如@Saurabh 所说，.on 函数接受callback 函数on('load', function() {。问题是return status; 在您的load 方法之前执行，这就是您收到undefined 的原因。其中一个解决方案是使用callback 函数，就像我的回答中一样，或者如@Saurabh 在他的回答中所说.
@ElDanielo 使用我的方法，您可以拥有一个状态 data 变量，可以在开始时将其设置为 false 并在 jquery 中设置为 true。您可以在 v-if 中使用此变量来显示加载图标。

【解决方案2】：

解决方案是使用callback 函数。

loading_asset_status(function(status){
    return status;
});
loading_asset_status(callback){
        var status;
        var img = $("img.modal-main-image").attr('src', this.current_image.img_url)
            .on('load', function(){
                status = (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0);
                callback(status);
        });
}

【讨论】：

【解决方案3】：

加载事件函数的调用是异步的。这是因为返回值（状态）是未定义的。解决问题的一种方法是有一个回调函数

loading_asset_status(Callback){
    var status;
    var lCallback = Callback;
    var img = $("img.modal-main-image").attr('src', this.current_image.img_url)
        .on('load', function() {
            status = (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0);
           lCallback (status)
         });
    return status;
}

【讨论】：