リストビューの読み込み中にGIFが読み込まれる

Question

読み込み時にlistviewに読み込み中のGIFを追加しようとしています。私は1つのリストビューを作成し、新しいリストビューを作成して、すべてのデータを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">