Better picture loading and preview image(?) needed for range slider controlled canvas

Question

I'm very inexperienced with javascript and coding in general, so I've cobbled the below code together from a few examples I've seen here and elsewhere. The code does 90% of what I want now, but I am wondering how I can get it to display the first image in the array "videoFrames" before the slider is moved, as it is right now, the canvas is blank on page load. The second thing is that it doesn't seem like the images are loading on page load, am I wrong? How can I improve/incorporate that into this code?

var canvas = document.getElementById("myCanvas");
var width = 1920;
var height = 1080;

var totalImages = 50;
var videoFrames = [];
for (var i = 1; i <= totalImages; i++) {
  var img = new Image;
  var videoFrameUrl = 'https://the-faction.squarespace.com/assets/chalet-lightmix-01/Chalet-V06_LM_' + i + '.jpg';
  img.src = videoFrameUrl;
  videoFrames.push(img);
}

$("#my-input").on("input", function(event) {
  var currentImage = videoFrames[event.target.value - 1];
  var ctx = canvas.getContext("2d");
  ctx.drawImage(currentImage, 0, 0, canvas.width, canvas.height);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="myCanvas" width="400" height="225" style="border:1px solid #d3d3d3;">
    Your browser does not support the HTML5 canvas tag.
    </canvas>
<br>
<input id="my-input" type="range" min="1" max="50" value="0" />

Answer 1

I get 404 on some of your images, but I would try triggering the input.

You can indeed draw immediately

Loading an image onto a canvas with javaScript

instead of waiting for input, but it will be the same wait as triggering it since the canvas has to exist before drawing on it

Here is how to trigger - NOTE:if the images are large, the preload of the the first image may have not yet finished when you trigger it

var canvas = document.getElementById("myCanvas");
var width = 1920;
var height = 1080;

var totalImages = 50;
var videoFrames = [];
for (var i = 1; i <= totalImages; i++) {
  var img = new Image;
  var videoFrameUrl = 'https://the-faction.squarespace.com/assets/chalet-lightmix-01/Chalet-V06_LM_' + i + '.jpg';
  img.src = videoFrameUrl;
  videoFrames.push(img);
}

$("#my-input").on("input", function(event) {
  var currentImage = videoFrames[event.target.value - 1];
  console.log("val",currentImage)
  var ctx = canvas.getContext("2d");
  ctx.drawImage(currentImage, 0, 0, canvas.width, canvas.height);
}).trigger("input");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="myCanvas" width="400" height="225" style="border:1px solid #d3d3d3;">
    Your browser does not support the HTML5 canvas tag.
    </canvas>
<br>
<input id="my-input" type="range" min="1" max="50" value="0" />

Version that may be working better

var canvas,ctx;
$(function() {
  canvas=$("#myCanvas")[0];
  ctx = canvas.getContext("2d");
  $("#my-input").on("input", function(event) {
    var currentImage = videoFrames[this.value];
    ctx.drawImage(currentImage, 0, 0, canvas.width, canvas.height);
  })

  var totalImages = 50;
  var videoFrames = [];
  for (var i = 1; i <= totalImages; i++) {
    videoFrames[i] = new Image();
    if (i === 1) {
      videoFrames[i].onload = function() {
        console.log("loaded")
        $("#my-input").trigger("input");
      }
    }
    videoFrames[i].src = 'https://the-faction.squarespace.com/assets/chalet-lightmix-01/Chalet-V06_LM_' + i + '.jpg';
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="myCanvas" width="400" height="225" style="border:1px solid #d3d3d3;">
    Your browser does not support the HTML5 canvas tag.
    </canvas>
<br>
<input id="my-input" type="range" min="1" max="50" value="1" />

Answer 2

What you seem to want is an image preloader.

The basic rule when dealing with images is You can't do anything with it before it has loaded.

You may implement all kind of image preloaders, depending on your rules, here is one which will trigger a callback when all the images have loaded an other one when the first image has loaded and which will remove the ones that did fail from the stack:

function preload(imgURLs, onalldone, onfirstdone){
  var loaded = 0;
  function onsingleload(){
    if(++loaded >= imgURLs.length){
      onalldone(stack);
    }
  }
  function onerror(evt){
    // remove the image from the stack
    stack.splice(stack.indexOf(evt.target), 1);
    onsingleload();
  }
  var stack = imgURLs.map(function(url, i){
    var img = new Image();
    if(!i && typeof onfirstdone === 'function'){
      img.addEventListener('load', onfirstdone);
    }
    img.src = url;
    img.onload = onsingleload;
    img.onerror = onerror;
    return img;
  });
  return stack;
}

// now your code
var canvas = document.getElementById("myCanvas");
var width = 1920;
var height = 1080;

var totalImages = 25;
var videoFrames = [];
for (var i = 1; i <= totalImages; i++) {
  videoFrames.push('https://the-faction.squarespace.com/assets/chalet-lightmix-01/Chalet-V06_LM_' + i + '.jpg');
}

videoFrames = preload(videoFrames, 
// when all images have loaded
function onfullyloaded(loadedImages){
  $("#my-input").attr({
    max: loadedImages.length - 1, // some errors ?
    disabled: false // now we can enable the range
    });
},
// when the first of the stack has loaded
function onfirstimageloaded(event){
    var ctx = canvas.getContext("2d");
    ctx.drawImage(event.target, 0, 0, canvas.width, canvas.height);
  });

$("#my-input").on("input", function(event){
  var currentImage = videoFrames[event.target.value];
  var ctx = canvas.getContext("2d");
  ctx.drawImage(currentImage, 0, 0, canvas.width, canvas.height);
  })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="myCanvas" width="400" height="225" style="border:1px solid #d3d3d3;">
    Your browser does not support the HTML5 canvas tag.
</canvas>
<br>
<input id="my-input" type="range" min="0" max="50" value="0" disabled/>

Answer 3

Wow 50 HD images, thats about 0.4Gig of RAM. Maybe you should consider compressing it all into a video.

Anyways don't load all the images in one go, start the first landing image as soon as you can. Use the image onload event to render it to the canvas as soon as it is ready.

Then load every 8th image so that you can at least fake the animation, people are not going to hang around waiting for 50 images to load, so give them something early. When every 8th image has loaded then get the ones in between.

As you are loading and the slider is moved, use the canvas to fade between the images you have.

The example below just uses 6 images. But it will work for any number of images (if the animation needs it) But you need to load them in steps, every so many, then the ones in between, and so on till all have loaded. While you wait fade between them if the slider is moved.

const ctx = canvas.getContext("2d");


const imagesIdx = [1,10,20,30,40,50];
const images = [];
imagesIdx.forEach((idx,i) => {
    const img = new Image;
    img.src = "https://the-faction.squarespace.com/assets/chalet-lightmix-01/Chalet-V06_LM_" + idx + ".jpg";
    if (i === 0) { img.onload = loadedFirst }
    images.push(img);
});

function loadedFirst(){

    ctx.drawImage(images[0],0,0,canvas.width, canvas.height);
    slider.addEventListener("mousemove",sliderMove);
}
var sliderValOld;
function sliderMove(){
    if(slider.value !== sliderValOld){
      var imageA = (Number(slider.value) / (Number(slider.max) / images.length)) | 0;
      if(imageA >= images.length){
          imageA -= 1;
      }
      var imageB = imageA + 1;

      while(!images[imageA].complete){ imageA -= 1 }
      while(imageB < images.length && !images[imageB].complete) { imageB += 1 }
      ctx.globalAlpha = 1;
      ctx.drawImage(images[imageA],0,0,canvas.width, canvas.height);
      if(imageB < images.length){
        var rng = Number(slider.max) / images.length;
        var a = imageA * rng;
        var b = imageB * rng;
        ctx.globalAlpha = (Number(slider.value) - a) / (b - a);
        ctx.drawImage(images[imageB],0,0,canvas.width, canvas.height);
      }
    }
    sliderValOld = slider.value;
}

<input id="slider" type="range" min="0" max="600" value="0" /><br>
<canvas id="canvas" width="400" height="225" style="border:1px solid #d3d3d3;">
  </canvas>