0

我每次调用这个javascript函数时都会遇到一个大left问题去排队rightleftrightsyllable_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);
        }
}

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

4

1 回答 1

0

好的，我想发布这个问题的解决方案，因为我认为脚本可能对没有加载和图像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 回答