获取 api css 加载程序

Question

我正在使用 fetch API 访问我在线开发和托管的 REST API。但是当从数据库中检索数据（>60 行）以显示在页面的某个部分时，显示我用 HTML 和 CSS 设置样式的数据大约需要 3-5 秒。

我的问题是如何实现 css 预加载器以在显示实际数据之前加载。还有我怎么知道数据已经显示了

下面是我的部分代码。

// Front end
frontend.html

<table>
<caption>User requests</caption>
<thead class="table-head">
<tr>
    <th scope="col">Request Id</th>
    <th scope="col">User ID</th>
    <th scope="col">Brand</th>
        <th scope="col">Type</th>
 </tr>
 </thead>
 <tbody id="tablebody">

  <div class="loader" id="loader"></div>

  </tbody>
     </table> 





// file.js
fetch(url, { 
method: 'GET',
headers: {'Authorization': 'Bearer ' +token}
}).then(response =>{ 
// Redirect the user to the login page
// If the user is not an admin
if(response.status === 401) {
    window.location.replace('./Index.html');
}
return response.json()
})
.then((data) => {  
let completedata = data.allRequests;
if(completedata) {
    completedata.forEach((item) => {
        timeStamp = new Date(item.createdon);
        dateTime = timeStamp.toDateString();
        theOutput +=`<tr id="listofrequests"><a href=""></a><td data- 
label="Request Id">${item.id}</td> </a>
        <td data-label="Brand">${item.userid}</td>
        <td data-label="Brand">${item.brand}</td>
        <td data-label="Type">${item.other}</td>
        <td data-label="Status">${item.name}</td>
        <td data-label="Status"><a href="./Request-status.html" class="btn 
view-detail" id="${item.id}" onClick="adminviewonerequest(this.id)">view</a> 
</td>
<td data-label="Cancel"><button class="danger" id="${item.id}" 
name="${item.name}" onClick="return cancelrequest(this.id, this.name)"><i 
class="fa fa-trash"> Cancel Request</i></button></td>
      </tr>`;
    });
}
else {
    toastr.warning(data.message);
}

document.getElementById('tablebody').innerHTML = theOutput;           
})
.catch(err => console.log(err));

Answer 1

使用那些已经实现的加载微调器How to make a loading spinner in html

然后，在你的 html 代码中添加 <div id="loading" class="loader"></div> ，使加载程序默认显示

并使用提取：

fetch(YouUrl)
.then(res => {
    if(res == 404){
        // To hide the loader when the error is happen , There is no need to use loader 
        // Show some toaster notification for the user or sweet alert 
        document.getElementById("loading").style.display = 'none';   
    }
})
.then(json => {
    // Here is your data so you need to hide the loader 
    document.getElementById("loading").style.display = 'none';   
});

获取 api css 加载程序

fetch api css loader

preloader

node.js

fetch-api