H5 图片系列—new Image()加载图片是否会有缓存,从而img标签获取同一数据源显示时使用该缓存数据?
是的,new Image()
在加载图片时,会利用浏览器的缓存机制。如果图片的 src 地址相同,浏览器会尝试从缓存中加载图片,而不是重新从网络请求。这是浏览器默认的行为,不会重复下载相同的图片,从而提高页面加载速度。
1.缓存机制
1.浏览器缓存:
a.当 img.src = imageUrl
被设置时,浏览器会尝试从缓存中查找这个图片的 URL。
b.如果缓存中有该图片,浏览器直接从缓存中加载图片,而不会再次发起网络请求。
c.如果没有缓存,则会发起网络请求下载该图片。
2.new Image() 与缓存:
a.new Image()
创建的图像对象与 <img>
标签一样,也会遵循浏览器的缓存策略。
b.也就是说,当你通过 new Image()
加载一个图片时,如果该图片的 URL 已经在浏览器缓存中,后续再次加载相同图片时会直接从缓存中获取。
2.缓存的相关细节
-
缓存控制:图片的缓存行为是由服务器设置的 HTTP 缓存头(如 Cache-Control)控制的。如果服务器响应中设置了合适的缓存头,浏览器会根据这些头信息来判断是否从缓存中加载图片。
比如,Cache-Control: max-age=3600 告诉浏览器缓存图片 1 小时,期间不会重新请求。 -
缓存验证:如果服务器端设置了合适的缓存策略,