如何在图片尺寸小于960×540时终止AJAX请求？

问题核心分析 #

你现在遇到的关键问题是**img.onload是异步执行的**——浏览器会先继续执行后面的同步代码，等图片加载完成后才会触发onload回调。所以你写的if (x == 1) {return false;}会在图片加载完成前就运行，这时候x还是初始值0，完全起不到判断拦截的作用。

修正后的代码方案 #

直接把AJAX的触发逻辑放到onload回调里，只有当图片尺寸符合要求时才执行AJAX，不符合就直接终止后续逻辑：

var src = localStorage.getItem('img'); 
var img = new Image(); 

img.onload = function() {
  // 先校验图片原始尺寸
  if (img.naturalWidth < 960 || img.naturalHeight < 540) {
    $('.cmenu').hide();
    console.log('CHOOSEN IMAGE IS TOO SMALL!');
    return; // 直接返回，不执行后续AJAX
  }

  // 尺寸符合要求时，才发起AJAX请求
  $.ajax({
    // 替换成你的AJAX配置
    url: 'your-request-url',
    method: 'POST',
    // ...其他参数（比如data、headers等）
    success: function(response) {
      // 处理请求成功的逻辑
    },
    error: function(error) {
      // 处理请求失败的逻辑
    }
  });
};

// 注意：必须把src赋值放在onload绑定之后，避免图片缓存导致回调不触发
img.src = src;

额外注意事项 #

• 把img.src = src放在onload事件绑定之后：如果图片已经被浏览器缓存，提前赋值src可能会导致onload回调还没绑定就直接触发，导致校验逻辑失效。
• 用naturalWidth/naturalHeight是正确的选择：这两个属性获取的是图片的原始像素尺寸，不会受CSS缩放、容器大小的影响，能准确判断图片本身的规格。

内容的提问来源于stack exchange，提问作者user7461846