JS中如何等待图片src更新完成后再执行后续代码

我完全理解你的困扰——用setTimeout确实是临时方案，不够可靠，毕竟图片加载时间受网络、图片大小影响很大，硬编码延迟要么没解决问题要么让用户等太久。咱们来彻底解决这个问题：

问题根源 #

你的readURL函数里，FileReader的onload只是把图片的src属性更新了，但图片从设置src到实际在浏览器中加载渲染完成是异步的，而你紧接着就初始化Cropper，这时候图片还没准备好，Cropper自然无法正确工作。

优化方案：监听图片加载完成事件 #

我们需要确保只有当图片完全加载后，再初始化Cropper。这里提供两种常用的实现方式：

方案一：使用Promise（推荐，更现代的异步处理）

修改readURL函数让它返回一个Promise，在图片加载完成后resolve，这样我们就能用.then()链式调用确保Cropper在正确时机初始化：

function readURL(input) {
  return new Promise((resolve, reject) => {
    if (input.files && input.files[0]) {
      const reader = new FileReader();
      
      reader.onload = function(e) {
        const $image = $('#image');
        // 更新图片src和背景样式
        $image.attr('src', e.target.result);
        $('.foto_add').css({
          'background-position': 'center top',
          'background-image': `url(${e.target.result})`
        });

        // 监听图片load事件，确保图片完全加载
        $image.one('load', function() {
          resolve(this);
        });

        // 处理图片已缓存的特殊情况（此时load事件不会触发）
        if ($image[0].complete) {
          resolve($image[0]);
        }
      };

      reader.onerror = (err) => reject(err);
      reader.readAsDataURL(input.files[0]);
    } else {
      reject(new Error('未选择任何文件'));
    }
  });
}

然后修改文件选择的change事件处理：

$("#avatar").change(function() {
  readURL(this)
    .then(() => {
      const $image = $('#image');
      // 此时图片已完全加载，安全初始化Cropper
      $image.cropper({
        aspectRatio: 1,
        autoCropArea: 0.1,
        cropBoxResizable: false,
        guides: false,
        highlight: false,
        toggleDragModeOnDblclick: false,
        minCropBoxWidth: 200,
        minCropBoxHeight: 200,
        minCanvasHeight: 200,
        zoomable: true,
        viewMode: 1, // 无法进入空白画布
        dragMode: 'move',
        responsive: true,
        imageSmoothingEnabled: false,
        imageSmoothingQuality: 'high',
        ready: function () {
          $image.cropper('setCanvasData', canvasData);
          $image.cropper('setCropBoxData', cropBoxData);
        }
      });
    })
    .catch(err => {
      console.error('加载图片出错:', err);
    });
});

方案二：使用回调函数（适合不熟悉Promise的场景）

如果你更习惯回调的写法，可以给readURL传入一个回调函数，在图片加载完成后执行：

function readURL(input, onImageLoaded) {
  if (input.files && input.files[0]) {
    const reader = new FileReader();
    
    reader.onload = function(e) {
      const $image = $('#image');
      $image.attr('src', e.target.result);
      $('.foto_add').css({
        'background-position': 'center top',
        'background-image': `url(${e.target.result})`
      });

      const initCallback = () => {
        if (typeof onImageLoaded === 'function') {
          onImageLoaded();
        }
      };

      $image.one('load', initCallback);
      if ($image[0].complete) {
        initCallback();
      }
    };

    reader.readAsDataURL(input.files[0]);
  }
}

调用方式：

$("#avatar").change(function() {
  readURL(this, function() {
    const $image = $('#image');
    $image.cropper({
      // 配置项和上面一致
      aspectRatio: 1,
      autoCropArea: 0.1,
      cropBoxResizable: false,
      guides: false,
      highlight: false,
      toggleDragModeOnDblclick: false,
      minCropBoxWidth: 200,
      minCropBoxHeight: 200,
      minCanvasHeight: 200,
      zoomable: true,
      viewMode: 1, // 无法进入空白画布
      dragMode: 'move',
      responsive: true,
      imageSmoothingEnabled: false,
      imageSmoothingQuality: 'high',
      ready: function () {
        $image.cropper('setCanvasData', canvasData);
        $image.cropper('setCropBoxData', cropBoxData);
      }
    });
  });
});

关键细节说明 #

• 我们不仅监听了图片的load事件，还判断了img.complete属性——这是为了处理图片已经被浏览器缓存的情况，此时load事件不会触发，直接执行初始化逻辑。
• 把多个css()调用合并成一个对象，让代码更简洁易维护。

内容的提问来源于stack exchange，提问作者priMo-ex3m