函数返回执行 Jquery Image load 之前的值答案

【问题标题】：Function returns the value before Jquery Image load is executed函数返回执行 Jquery Image load 之前的值
【发布时间】：2015-04-20 11:13:16
【问题描述】：

if (DataService.Validation(file)) {
    //angularjs call to api controller
};    

//DataService
Validation: function (file) {
    var Url =   URL.createObjectURL(file);
    var img = new Image();

    $(img).load(function () {
        var imgwidth = this.width;
        var imgheight = this.height;
        if (imgheight  > 400) {
            viewModel.ErrorMessage = 'The Image height cannot be more then 400 px.';
            return false;
        }
    });

    img.src = Url;

    if (file == null) {
        viewModel.ErrorMessage = 'Please select a file to upload.';
        return false;
    }

    if (viewModel.Name == null) {
        viewModel.ErrorMessage = 'Name is a required field.';
        return false;
    }

    return true;
}

上述验证函数正在完成执行并返回true，没有检查img加载函数中的代码。这意味着即使图像大于400px，验证也会返回true，因为加载中的代码在很长一段时间后运行一旦整个 Jquery ajax 调用被发送到 api 控制器.. 我想要实现的是，在执行图像加载中的代码之前，验证不应该返回值。

【问题讨论】：

图片加载是异步的。所以，你看到的是对的。
您需要将所有代码放在 .load 之后 - 调用到您传递给此调用的回调函数中。
我尝试在加载后删除所有代码并将其添加为函数，并从加载事件内部调用。但结果仍然相同它不等待加载执行它只是返回未定义..我们可以像在某些 ajax 调用中那样强制加载调用是同步的吗？

标签： javascript jquery angularjs jquery-ui jquery-file-upload

【解决方案1】：

我在检查图像尺寸时遇到了同样的问题，因为图像加载是异步的。正如@Abhinandan 所说 "IMG 加载函数只有在你的图片被浏览器完全加载后才会执行，因为它是异步的，所以你的函数不会等待它执行"

我使用了以下方法。希望它会有所帮助。

在更改文件时在图像标签中设置一个额外的属性，如下所示

$('input[type=file]').on('change',function(){
    element = $(this);
    var files = this.files;
    var _URL = window.URL || window.webkitURL;
    var image, file;
    image = new Image();
    image.src = _URL.createObjectURL(files[0]);
        image.onload = function() {
            element.attr('uploadWidth',this.width);
            element.attr('uploadHeigth',this.width);
        }
    });

现在你可以修改你的函数到下面

$.validator.addMethod('checkDim', function (value, element, param) {     
    var image = new Image();
    var file = element.files[0];
    var _URL = window.URL || window.webkitURL;
    image.src = _URL.createObjectURL(file);
        if(element.uploadWidth== param[0] element.uploadHeigth== param[1]){ 
            return true;
        }
        else{            
            return false;
        }

}, 'Image dimension must be as specified');

对我有用

【讨论】：

【解决方案2】：

该行为是正确的，因为您的函数将始终返回“真”值。 IMG 加载功能只有在您的图像被浏览器完全加载后才会执行，并且由于它是异步的，您的功能不会等待它执行。此外，如果您想检查正在加载的图像的宽度/高度，请使用 naturalWidth/naturalHeight 因为这将给出正确的值，而不是由 css 分配给图像的值。

你可以在image-load函数里面做，你可以调用你的函数，参数是真/假值。

【讨论】：