慎用image crossOrigin属性

使用Image对象预加载图片:

const img = new Image();
img.crossOrigin = 'anonymous';

如果设置了crossOrigin,就要小心了。若在html <img/>标签内没有使用该属性,会造成两次图片请求,达不到预加载的效果。

原理是crossOrigin属性会在http请求头增加Origin头,导致两次请求是不同的(类似请求地址增加随机数去缓存效果)。

但是crossOrigin在处理canvas图片跨域报错时,是有用的。

发表评论

电子邮件地址不会被公开。 必填项已用*标注