慎用image crossOrigin属性

使用Image对象预加载图片:

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

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

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

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

http://cssor.com/image-cross-origin.html

参与评论

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

*

全部分类
Books(4)code(7)database(6)html&css(24)java(11)JavaScript(57)jQuery(24)linux(20)python(1)React(1)share(1)soft(4)solution(54)thinking(17)vim(9)WordPress(8)前端优化(12)拓展(33)服务器(33)移动开发(4)自然(22)