Я пытаюсь построить поверх этого замечательного сценарияВот на что ответил Phrogz.

Проблема в том, что анимация не будет воспроизводиться, пока все изображения не будут кэшированы в браузере. Поэтому при первой загрузке он не будет играть. Только на перезагрузке.

Смысл моей попытки сделать это заключается в том, что я пытаюсь предложить альтернативное решение для запуска анимации для автозапуска, поскольку эта функция не работает в браузерах iOS.

Вот код, который я использую:

         function draw() { 
            var imgNumber = 1;
            var lastImgNumber = 121;

            var ctx = canvas.getContext('2d');
            var img = new Image;
            img.onload = function(){
            ctx.clearRect( 0, 0, ctx.canvas.width, ctx.canvas.height );
            ctx.drawImage( img, 0, 0 );
            };
            var timer = setInterval( function(){
              if (imgNumber>lastImgNumber){
                clearInterval( timer );
              }
             else{
                img.src = "jpg_80/t5_"+( imgNumber++ )+".jpg";
              }
            }, 1000/24 ); //Draw at 24 frames per second
          }

Я попытался добавить это перед закрывающим тегом body:

                 window.onload = draw; 

Тем не менее, я считаю, что код должен быть изменен внутри функции draw (). Где-нибудь в функции setInterval?