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

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

1 个答案: