更改<img>上显示的图像的有效方法？

Question

In javascript, I have a reference to a DOM <img> element. I need to change the image displayed by the <img> from within the javascript.

So far, I have tried this by changing the image.src attribute to the URL of the new image. This worked, but there is still a problem: I need the image to be changed many times per second, and changing the src attribute causes the browser to do a new GET request for the image (which is already cached), which puts strain on the web server since there will be hundreds of simultanious clients.

My current (inefficient) solution is done like this:

 let image = document.querySelector("img"); setInterval(function(){ image.src = getNextImageURL();//this causes a GET request }, 10); function getNextImageURL() { /*...implementation...*/ } 

 <img> 

I am looking for a more efficient way of changing the image, that does not cause any unnecessary HTTP requests.

Answer 1

I think you need to code in a different way...

if you want to reduce requests you should combine all image in one sprite Sheet. this trick is used so many in-game animations. But you will need to change <img/> tag to another tag like <div></div>

the idea here is that we have one image and we just change the viewport for what we want

sample For sprite sheet

 let element = document.querySelector("div"); let i = 1 setInterval(function(){ element.style.backgroundPosition= getNextImagePostion(i++);//this will change the posion }, 100); function getNextImagePostion(nextPos) { /*...implementation...*/ // this just for try // 6 is the number of images in sheet // 20 is the height for one segment in sheet var posX = 100*(nextPos%6); // first is position on x and latter is position on y return "-"+posX+"px 0px "; } 

 .image { width: 100px; /* width of single image*/ height: 100px; /*height of single image*/ background-image: url(https://picsum.photos/500/100?image=8) /*path to your sprite sheet*/ } 

 <div class="image"> </div> 

Answer 2

If the sprite-sheet idea doesn't work (eg because you have big images), then use a canvas .

You just need to preload all your images, store them in an Array and then draw them one after the other on your canvas:

 const urls = new Array(35).fill(0).map((v, i) => 'https://picsum.photos/500/500?image=' + i ); // load all the images const loadImg = Promise.all( urls.map(url => new Promise((res, rej) => { // each url will have its own <img> const img = new Image(); img.onload = e => res(img); img.onerror = rej; img.src = url; }) ) ); // when they're all loaded loadImg.then(imgs => { // prepare the canvas const canvas = document.getElementById('canvas'); // set its size canvas.width = canvas.height = 500; // get the drawing context const ctx = canvas.getContext('2d'); let i = 0; // start the animation anim(); function anim() { // do it again at next screen refresh (~16ms on a 60Hz monitor) requestAnimationFrame(anim); // increment our index i = (i + 1) % imgs.length; // draw the required image ctx.drawImage(imgs[i], 0, 0); } }) .catch(console.error); 

 <canvas id="canvas"></canvas> 

And if you wish time control:

 const urls = new Array(35).fill(0).map((v, i) => 'https://picsum.photos/500/500?image=' + i ); // load all the images const loadImg = Promise.all( urls.map(url => new Promise((res, rej) => { // each url will have its own <img> const img = new Image(); img.onload = e => res(img); img.onerror = rej; img.src = url; }) ) ); // when they're all loaded loadImg.then(imgs => { // prepare the canvas const canvas = document.getElementById('canvas'); // set its size canvas.width = canvas.height = 500; // get the drawing context const ctx = canvas.getContext('2d'); const duration = 100; // the number of ms each image should last let i = 0; let lastTime = performance.now(); // start the animation requestAnimationFrame(anim); // rAF passes a timestamp function anim(time) { // do it again at next screen refresh (~16ms on a 60Hz monitor) requestAnimationFrame(anim); const timeDiff = time - lastTime; if(timeDiff < duration) { // duration has not yet elapsed return; } // update lastTime lastTime = time - (timeDiff - duration); // increment our index i = (i + 1) % (imgs.length); // draw the required image ctx.drawImage(imgs[i], 0, 0); } }) .catch(console.error); 

 <canvas id="canvas"></canvas>