在列表视图上加载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">