在列表視圖上加載gif時，它的填充

Question

我想在列表視圖中添加加載gif時。我有一個列表視圖，其中我們選擇一個類別，然後創建一個新的列表視圖，其中所有數據通過ajax調用&我使用select2作爲多選項選擇，但是當我選擇數據時需要大量時間來填充當時的列表頁面在加載時變得無響應。

所以我想讓用戶知道它的加載數據，所以他必須等待。所以我需要你的幫助爲listview的一些例子。

Answer 1

let more = document.querySelector("button"); 
 
let show = document.querySelector(".show"); 
 
let loading = document.querySelector(".loading"); 
 

 

 
more.addEventListener("click",function(){ 
 
\t 
 
\t loading.classList.add("show"); 
 

 
    let xhttp = new XMLHttpRequest(); 
 
    xhttp.onreadystatechange = function() { 
 
    if (this.readyState == 4 && this.status == 200) { 
 
     let back = xhttp.response; 
 
     back = JSON.parse(back); 
 
     let imgSrc = back.results[0].picture.large; 
 
     
 
     let imgEl = document.createElement("img"); 
 
     imgEl.src = imgSrc; 
 
     show.appendChild(imgEl); 
 
\t \t \t loading.classList.remove("show"); 
 
     
 
    } 
 
    }; 
 
    xhttp.open("GET", "https://randomuser.me/api/", true); 
 
    xhttp.send(); 
 

 
});

img{ 
 
    
 
    display: inline; 
 
    
 
} 
 

 
.more{ 
 
    
 
    position: fixed; 
 
    top: 1em; 
 
    right: 5em; 
 
    background: skyblue; 
 
    color: #FFF; 
 
    padding: 0.5em; 
 
    border: none; 
 
    cursor: pointer; 
 
    outline: none; 
 
} 
 

 
.loading{ 
 
\t width: 10em; 
 
\t height: 10em; 
 
\t display: none; 
 
\t position: fixed; 
 
\t top: 5em; 
 
\t right: 1em; 
 
\t background: #212323; 
 
\t padding: 0.5em; 
 
} 
 

 
.loading.show{ 
 
\t display: block; 
 
}

<img src="https://unsplash.it/300/300/?random" /> 
 
<div class="show"></div> 
 
<button class="more">More</button> 
 
<img src="http://www.lettersmarket.com/uploads/lettersmarket/blog/loaders/common_metal/ajax_loader_metal_512.gif"class="loading">