javascript - 如何在循环执行时逐渐将内容附加到 div？

Question

我正在尝试从 xml 中显示圣经内容。这是一个 phonegap 应用程序。我有从 xml 中获取以下内容的函数:

1. 书籍名称数组 -> getAllBooks() 将名称存储到数组“books[]”中
2. 一本书的章节数 -> getChapterCount(book)
3. 一章中的经文数量 -> getVerseCount(book,chapter)
4. 经文 -> getVerse(book,chapter,verse)

现在我正在尝试使用 jquery 将整本圣经显示到一个 div 中。我正在使用以下功能:

function showWholeBible() {
    getAllBooks();
    for (var i = 0; i < books.length; i++) {
        for (var j = 1; j <= parseInt(getChapterCount(books[i])); j++) {
            for (var k = 1; k <= parseInt(getVerseCount(books[i], j)); k++) {
                $('#bibleDiv').append(getVerse(books[i], j, k));
                // alert(getVerse(books[i],j,k));
            }
        }
    }
}

div 显示内容需要非常非常长的时间。只有当整个循环集完成时，内容才会显示。

有没有办法在弹出上面的评论警报的同时将每节经文附加到 div？以便逐渐附加发生..？

或者是否有任何其他方法可以缩短加载时间？

Answer 1

当然需要很长时间...当您构建 HTML 时，浏览器不知道如何显示它……至少在您这样做时是这样。所以它一直等到所有 HTML 元素都可用。

然后它可以构建他的 DOM 树......(我在这里简化......它更复杂 -读一读here )

所以您需要做的是添加一些逻辑来加载 <div>只有当用户向下滚动然后下一个 <div>显示。

这称为延迟加载，可以通过 JavaScript 实现……看看一些 javascript 框架……它们中的大多数都提供这种开箱即用的逻辑。