Question

我试图从xml中显示圣经内容。它是一个phonegap应用程序。我有从xml中获取以下内容的函数：

图书名称数组 - ＆gt; getAllBooks（）将名称存储到数组＆＃39; books []＆＃39;
书中的章节数 - ＆gt; getChapterCount（书）
章节中的经文数量 - ＆gt; getVerseCount（书，章）
经文 - ＆gt; getVerse（书，章，节）

现在我正在尝试使用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框架......大多数都提供了这种开箱即用的逻辑。

Answer 2

您需要使用setTimeout()对诗歌添加逻辑进行排队，以便浏览器有时间渲染每节经文，然后再添加下一节。

所以我会创建一个附加这节经文的函数：

var $bible = $('#bibleDiv'); // cache this to avoid having to find it every time
var versesAppended = 0;
function displayVerse(book, chapterIndex, verseIndex) {
    setTimeout(function () {
        $bible.append(getVerse(book, chapterIndex, verseIndex);
    }, versesAppended * 10); // even 0 ms delay is enough to allow the browser to render it
    versesAppended++;
}

然后你的代码只使用那个函数：

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++) {
                displayVerse(books[i], j, k);
                // alert(getVerse(books[i],j,k));
            }
        }
    }
}

Answer 3

尝试以下代码可能会更快一点。

function showWholeBible() {
getAllBooks();
var conatainer = $('#bibleDiv');
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++) {
            conatainer.append(getVerse(books[i], j, k));
            // alert(getVerse(books[i],j,k));
        }
    }
}
}

在DOM

中仅搜索 bibleDiv 一次

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

3 个答案: