JavaScript 图像同步

Question

如果在运行脚本之前图像已加载到 DOM 中(使用标签)，则以下任一注释是否正确？

var image = new Image();
image.onload = function(){}
image.src = "already-loaded-earlier.png";

// image.onload is guaranteed to be called right now
// image is guaranteed to be loaded and available for use right now

Answer 1

Image onload 回调始终异步调用。如果图像已加载，则在下一个tick时调用onload。下面的代码片段在 end 行之后输出 image is returned secondary time 行。

var img = new Image();
img.onload = function() {
  console.log('image is loaded first time');
  var img = new Image();
  img.onload = function() {
    console.log('image is loaded second time');
  };
  img.src = '/image/Bt4Tq.jpg?s=32&g=1';
  console.log('end');

  // you can use img, without waiting `onload` to be called
  console.log(img.width, img.height);
};
img.src = '/image/Bt4Tq.jpg?s=32&g=1';