利用一次异步请求
# 利用fetch来请求, 需要注意的是这种请求会受到同源策略的限制
fetch('http://example.com/a.png', {
headers: {
responseType: blob,
}
}).then( blob => blob.size)
.catch( e => e);
利用canvas转blob来获取size
async function getImgSize(url) {
const canvas = document.createElement("canvas");
const context = canvas.getContext("2d");
const img = document.getElementById("tulip");
context.drawImage(img, 0, 0);
const blob = await canvas.toBlob(blob => blob);
return blob?.size || 0;
}
利用performance来获取
const imgElems = document.getElementsByTagName('img');
for ( let i=0, len = imgElems.length; i < len; i++ )
{
const url = imgElems[i].src || imgElems[i].href;
if (url && url.length > 0)
{
const iTime = performance.getEntriesByName(url)[0];
console.log(iTime.transferSize); //or encodedBodySize, decodedBodySize
}
}
需要注意到是，上诉三种方法都受到同源策略的限制
如果两个 URL 的 protocol、port (如果有指定的话)和 host 都相同的话，则这两个 URL 是同源。这个方案也被称为“协议/主机/端口元组”，或者直接是 “元组”。（“元组” 是指一组项目构成的整体，双重/三重/四重/五重/等的通用形式）。
