Is it possible ot truely reload the image?-CodePudding

I am trying to determine the speed of loading an image by average

My code looks something like this

function test(){
    const now = performance.now();
    const image = new Image();
    image.src = "https://upload.wikimedia.org/wikipedia/en/thumb/8/80/Wikipedia-logo-v2.svg/1200px-Wikipedia-logo-v2.svg.png"
    image.onload = function(){
        const end = performance.now(); 
        const speed = end-now
        console.log(speed)
    }
}
setInterval(test,1000)

The code works fine, but the problem is after the image loaded for the first time, it will loaded very first from about (64ms to less than 1 ms in my side).

My guess is the broswer will keep some data of the image until the window reloaded or closed (correct me if I am wrong)

Is it possible to prevent this without using window.reload and truely reload the image??

Example:

Thanks for any responds!

CodePudding user response：

Just add your now as a query parameter to your url:

function test(){
    const now = performance.now();
    const image = new Image();
    image.src = `https://upload.wikimedia.org/wikipedia/en/thumb/8/80/Wikipedia-logo-v2.svg/1200px-Wikipedia-logo-v2.svg.png?${now}`
    image.onload = function(){
        const end = performance.now(); 
        const speed = end-now
        console.log(speed)
    }
}
setInterval(test,1000)