Swapping out images repeatedly at a high frame rate on iOS + Javascript?

Hey all what I am trying to implement is somethting where a user can slide a slider and update an image as the slider moves around. Sometimes the framerate will be ~30 fps.

What I have tried:

• Use an img tag and set the src directly to the respective image.
• Use a single div and set the background-image property to the respective image.
• Use one div for each image and adjust their z-indices.
• Use one div for each ima开发者_JS百科ge and adjust their opacity.
• Use one div for each image and adjust their opacity via CSS3 animation.
• Keep a buffer of images both adjusting opacity or z-index and loading the correct image.

Any thoughts? Or is what I'm trying to do impossible? I have also tried using a video for the same purpose but the seek time is too long.

const FPS = 60;
var self = this;
setInterval(
        function() {
                self.setCurrentImageByIndex((self._currentImageIndex + 1) % 169);
        },
        1000 / FPS
);

The techniques you listed are old fashioned,since you are developing application on iOS platform. You can use modern technique like canvas to draw the image, it's verfy fast on iOS.

And as far as i know canvas on iOS is hardware accelerated.

Here is an example code to draw an image using canvas:

  function draw() {
    var ctx = document.getElementById('canvas').getContext('2d');
    var img = new Image();
    img.onload = function(){
      ctx.drawImage(img,0,0);
      ctx.beginPath();
      ctx.moveTo(30,96);
      ctx.lineTo(70,66);
      ctx.lineTo(103,76);
      ctx.lineTo(170,15);
      ctx.stroke();
    };
    img.src = 'images/backdrop.png';
  }

There is a tutorial on MDN