Preload image with xhr2/blob

Question

I want to preload a image with xhr2/blob, because I need a download progress, so I don't want to using new Image() for the preloading, But I not sure the xhr2/blob can it store the cache before next requrest, anynoe know the details? can I using xhr2/blob for preloading? Or it only can use new Image()?

Answer 1

Yes xhr will use the cached version if there is one.

You can check in the Network panel of your dev tools, or just compare the loading time of these requests :

 const url = 'https://dl.dropboxusercontent.com/s/4e90e48s5vtmfbd/aaa.png?' + Math.random(); // the same for both requests, but different for each snippets function requestData(cb){ let xhr = new XMLHttpRequest(), startTime; xhr.open('get', url); xhr.onload = e => { console.log(performance.now() - startTime); if(cb){ cb(); } } startTime = performance.now(); xhr.send(); } requestData(requestData); 

---

No you can not use it to preload your images.

Every image loading is asynchronous, even if served from http cache, or blobURI, or dataURI *

 fetch('https://dl.dropboxusercontent.com/s/4e90e48s5vtmfbd/aaa.png') .then(resp => resp.blob()) .then(blob => { let url = URL.createObjectURL(blob); for(let i=0; i<5; i++){ let img = new Image(); img.src = url; console.log('synchronous', img.naturalWidth, img.complete); } let img = new Image(); img.onload = e => console.log('async', img.naturalWidth, img.complete); img.src = url; }); 

*(At least it should be, some UAs are known to load the resources in a synchronous way if served from cache)