javascriptでIE11のみ動かない

Question

解決したいことは、以下のpngのフレームアニメーションでIE11だけ、動きません。
他、chrome、safariなどは動作確認済みです。

ご教授いただけますでしょうか。

const $element = $j('.hanabira-anime');
        const imagePath = '/dummy/';
        const totalFrames = 100;
        const animationDuration = 10000;
        const timePerFrame = animationDuration / totalFrames;
        let timeWhenLastUpdate;
        let timeFromLastUpdate;
        let frameNumber = 1;

        
        function step(startTime) {
            
            if (!timeWhenLastUpdate) timeWhenLastUpdate = startTime;
            timeFromLastUpdate = startTime - timeWhenLastUpdate;

            // then we check if it is time to update the frame
            if (timeFromLastUpdate > timePerFrame) {
                // and update it accordingly
                $element.attr('src', imagePath + `img/hanabira/Par_hanabira${frameNumber}.png`);
                // reset the last update time
                timeWhenLastUpdate = startTime;

                // then increase the frame number or reset it if it is the last frame
                if (frameNumber >= totalFrames) {
                    frameNumber = 1;
                } else {
                    frameNumber = frameNumber + 1;
                }
            }

            requestAnimationFrame(step);
        }

     
        $j(document).ready(() => {
            for (var i = 1; i < totalFrames + 1; i++) {
                $j('body').append(`<div id="preload-image-${i}" style="background-image: url('${imagePath}img/hanabira/Par_hanabira${i}.png');"></div>`);
            }
        });

        // wait for images to be downloaded and start the animation
        $j(window).on('load', () => {
            requestAnimationFrame(step);
        });

Answer 1

「`」で囲んだテンプレートリテラルはIE11では未サポートです. 素直に文字列の連結に置き換えましょう.

書き換えの例

`<div id="preload-image-${i}" style="background-image: url('${imagePath}img/hanabira/Par_hanabira${i}.png');"></div>`
//↓
'<div id="preload-image-' + i + '" style="background-image: url(\'' + imagePath + 'img/hanabira/Par_hanabira'+ i + '.png\');"></div>'

書き換えのコツ

• 単なるテキスト連結なので, 一旦別のスクリプトで試してみて正しい結果が得られたものを元のスクリプトに埋め込む.
• 一度に書き換えると文字列の区切りがわかりにくくなるので, 少しずつ切り分けるようにする.
• 区切り文字として'と"の両方を含む場合は適切に文字を\でエスケープする.

NOTE:
なお, テンプレートとなる文字列をreplaceメソッドで置き換えたり, [].joinで文字列を連結する方法もあります(パフォーマンスとしての有利不利は無視できるものとして).

Comments

[退会済みユーザー]

ご教授いただきましてありがとうございます。
文字列での連結の方法を調べて見ます！！
ありがとうございます。

[退会済みユーザー]

すみません、文字列に書き換えるには変数に入れて以下のように書き換えるのがよろしいでしょうか。

var name = "Jane";
console.log("I am " + name); // ES5
console.log(`I am ${name}`); // ES2015

[defghi1977]

はい, それで十分です.

[退会済みユーザー]

すみません、書き換えを試みているのですが、
こちらの文字列書き換えでエラーがでてしまいまして、
ご教授いただけますでしょうか。

$j('body').append("<div id='preload-image-'" + i "style='background-image: url("imagePath + "img/hanabira/Par_hanabira" + i.png");'></div>");

[defghi1977]

その部分は'~'の中に'が含まれていますから, 適切にエスケープ（\'）しないとうまく行かないよ
この手のやつは一気に書き換えるんじゃなくて, 少しずつ文字列を分割・連結するようにするんだ

[退会済みユーザー]

かしこまりました。
このような形でしょうか。
まだ、エラーがでてしまいますが汗

$j('body').append("<div id=\'preload-image-" + i "\'" "style=\'background-image: url(\'" + imagePath + "Par_hanabira" + i".png\"");""></div>");

[defghi1977]

単なるテキストエディタだと文字列の切れ目が判読しにくく, どこに問題があるか気が付きにくいので
コードを分析してくれるエディタを使ってみましょう. また上での「少しずつ」ってのは「文字列を細切れにする」んじゃなくて, 「一箇所切り刻んで, 文法エラーが出ないことを確認したらもう一箇所切り刻め」ってことです.

…と言ったようなことが世界中で起きているので, テンプレートリテラルが導入されたわけです