Object.defineProperty不能监听image的complete属性。

Question

问题描述

Object.defineProperty不能监听image的complete属性。get、set均无法监听到

问题出现的环境背景及自己尝试过哪些方法

任何环境。
1、尝试过原生的onload方法，jQuery的load方法，但是存在缓存问题，如果图片被缓存就不会再触发onload/load事件。因为请求的图片是调接口形式（比如http://12.34.56.78:8000?f=1&a=2.png），所以没法在地址后面加参数，还没试过加hash
2、不太想用定时器。
3、还有一个没试过，就是用XMLHttpRequest去请求图片，请求回来的时候页面上的那张估计就加载好了，但是这样会增加页面的内存压力，我不太想这样做。

相关代码

let img = $('.appImg')[0];
Object.defineProperty(img, img['complete'], {
      enumerable: true,
      configurable: false,
      get: () => {
        console.log('img[complete]', img['complete']); //理应递归报错，但是没打印任何东西
      },
      set: (val) => {
        console.log('set');
        if (val === true) {
          console.log('set true');
          cb();
        }
      }
});
function cb(){}

你期待的结果是什么？实际看到的错误信息又是什么？

期望：当图片太大时，等待图片加载完，触发img['complete']的set方法，执行cb方法。
实际：没有正确绑定上get和set方法

Answer 1

Object.defineProperty(img, 'complete', {....});