Question

我注意到很多地方和我的网站都存在问题，我对解决方案很感兴趣。

为什么在jquery加载大量数据时，任何浏览器都会阻塞？

在一个网站上，我制作了统计数据，检查了超过11,000个条目，这些条目构成了分页，并显示了来自数据库的400个条目的列表。当我开始加载该数据时，我的浏览器上的任何功能都会停止工作，直到加载完成。当我在phpMyAdmin工作时也会发生同样的情况。

有没有办法改善负载，或防止阻塞？谢谢！

修改这是我使用的jQuery：

<script>
$(document).ready(function() {
    $("#results").prepend('<div class="loading-indication"><img src="loading.gif" /> Loading...</div>').load("fetch_pages.php", {'page':0}, function() {$("#1-page").addClass('active');});  //initial page number to load

    $(".paginate_click").click(function (e) {
        var clicked_id = $(this).attr("id").split("-"); //ID of clicked element, split() to get page number.
        var page_num = parseInt(clicked_id[0]); //clicked_id[0] holds the page number we need
        $('#if').removeClass('active'); //remove any active class
        $("#results").prepend('<div class="loading-indication"><img src="loading.gif" /> Loading...</div>').load("fetch_pages.php", {'page': (page_num-1)}, function(){});
        $(this).addClass('active'); //add active class to currently clicked element
        return false; //prevent going to herf link
    });
});
</script>

在fetch_pages.php上是一个带有while函数的简单PHP循环。

Answer 1

您可以使用此代码来解决您的问题：使用$ .ajax发送请求以及async true

<script>
$(document).ready(function() {
    function getPage(pageno)
    {
        $.ajax({
            type: "POST",
            cache: false,
            url: "fetch_pages.php",
            data: "page="+pageno,
            async: true,
            crossDomain: false,
            beforeSend: function () {
                 $("#results").prepend('<div class="loading-indication"><img src="loading.gif" /> Loading...</div>')
            },
            success: function (resp){
                $("#results").html(resp);
                $("#"+pageno+"-page").addClass('active');
            }
        });
    }
    //initial page number to load
    getPage(0);

    $(".paginate_click").click(function (e) {
        var clicked_id = $(this).attr("id").split("-"); //ID of clicked element, split() to get page number.
        var page_num = parseInt(clicked_id[0]); //clicked_id[0] holds the page number we need
        $('#if').removeClass('active'); //remove any active class
        getPage(page_num-1);
        return false; //prevent going to herf link
    });
});

当jquery加载大量数据时，为什么浏览器会阻塞？

1 个答案: