如何等待图像直到完成加载以执行下一个操作

Question

每次我调用这个 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);

这里是两个图片

<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);
        }
}

似乎它并不关心所有图像何时真正完成加载，我假设有第二种方法可以使用此脚本

Answer 1

好的，我想发布此问题的解决方案，因为我认为 ImagesLoaded 脚本可能对 left 和 right 图像都没有加载或未加载感到困惑，所以我决定制作新的图像，我可以告诉它尚未加载，在我检查它已加载后，我更改 left 和 right 像这样的图像

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);
            } 
}