0

私はここで大きな問題に直面しています。この JavaScript 関数を呼び出すたびにleft、right画像が読み込まれるまで待機しませんが、すぐに次の操作に進みます。画像が完全に読み込まleftれるまで停止してから、行rightに行くsyllable_text.html(slice.The_Syl);

function showImagesByPairAtInterval(Syllables, interval, index) {
        index = index || 0;
        let slice = Syllables[index];
        left.attr('src', "http://example.com/"+ slice.Url1);
        right.attr('src', "http://example.com/"+ slice.Url2);
        syllable_text.html(slice.The_Syl);
        nextIndex = index + 1;
        if (nextIndex <= Syllables.length - 1) {
            setTimeout(showImagesByPairAtInterval.bind(
                null,
                Syllables,
                interval,
                nextIndex
            ), interval);
        }
}

ここで、この関数を呼び出す方法

showImagesByPairAtInterval(syllables.Syllables, 3000);

そしてここに2枚の画像があります

<div id="images" style="display: flex;">
    <img src="" id="left_image" name="left_image" alt="" />
    <img src="" id="right_image" name="right_image" alt="" />
</div>

更新されたスクリプト

ImagesLoadedで見つけたImagesLoadedスクリプトを使用した後

function showImagesByPairAtInterval(Syllables, interval, index) {
        index = index || 0;
        let slice = Syllables[index];
        left.attr('src', "http://deaf-api.azurewebsites.net/"+ slice.Url1);
        right.attr('src', "http://deaf-api.azurewebsites.net/"+ slice.Url2);
        while (!$("#images").imagesLoaded().always()) {
        }
        syllable_text.html(slice.The_Syl);


        nextIndex = index + 1;
        if (nextIndex <= Syllables.length - 1) {
            setTimeout(showImagesByPairAtInterval.bind(
                null,
                Syllables,
                interval,
                nextIndex
            ), interval);
        }
}

すべての画像の読み込みがいつ終了するかはあまり気にしないようです。このスクリプトを使用する別の方法があると思います。

4

1 に答える 1

0

OK、この問題の解決策を投稿したいと思います。なぜなら、スクリプトが画像と画像ImagesLoadedのどちらも読み込まれていないかどうかについて混乱している可能性があるため、まだ読み込まれていないことを確認できる新しい画像を作成することにし、読み込まれたことを確認した後です。変更とこのようなイメージleftrightleftright

function showImagesByPairAtInterval(Syllables, interval, index) {
            index = index || 0;
            let slice = Syllables[index];
            var left_img = new Image();
            var right_img = new Image();
            var div_img = document.createElement('div');
            var $div_img = $("<div>");
            $div_img.append(left_img);
            $div_img.append(right_img);
            left_img.src = "example.com/" + slice.Url1;
            right_img.src = "example.com/" + slice.Url2;
            while (!$div_img.imagesLoaded().done()) {
            }
            left.attr('src', "http://example.com/" + slice.Url1);
            right.attr('src', "http://example.com/" + slice.Url2);

            syllable_text.html(slice.The_Syl);


            nextIndex = index + 1;
            if (nextIndex <= Syllables.length - 1) {
                setTimeout(showImagesByPairAtInterval.bind(
                    null,
                    Syllables,
                    interval,
                    nextIndex
                ), interval);
            } 
}
于 2016-11-09T01:31:28.457 に答える