Question

我对所有内容准备就绪后应该加载的功能有疑问。我有一个庞大的ajax调用1700行代码。

我的代码如何工作： php文件从数据库的3个表中获取数据并将其转换为JSON。我打开JSON文件并为1个数据库结果创建1个元素。

目前，我有大约100个结果，但最后一步将有1000个结果。因此，我创建了要在页面加载之前放置的加载。但是因为主要内容是由js创建的，所以有时我的加载会在加载内容之前1-2秒消失。我可以使用js或jquery。现在，我使用类似的东西：

$(window).on ('load', function (){
     setTimeout(function (){
     $("#loading").fadeOut('slow');}, 1000)});

Answer 1

通过AJAX接收数据后，执行该功能。检查下面的代码段

            $.ajax({
                    url: '/URL/TO/CODE',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') //This is optional if you are using x-csrf-token validation of if u want to pass any header data
                    },
                    type: "post",
                    data: {
                        data:data //In case if you need to pass any data
                    },
                    dataType: 'json',
                    cache: false,
                    before:function(){
                        //Is you want to show any loader or anything while ajax is being executed.
                    },
                    success: function (response) {
                       //Once your ajax  is success you can call your custom function to do things with the data
                     myCustomFunction();
                    },
                    error: function (res) {
                        console.log(res);
                    }
                });


       function myCustomFunction(){
          //This to be executed when all data are filled by ajax and page is loaded
       }

希望这会有所帮助。

Answer 2

$(window).ready(function (){
   setTimeout(function(){ $("#loading").fadeOut('slow'); }, 3000);
});

Ajax加载所有DOM元素后如何加载函数

2 个答案: