在填充时在 Listview 上加载 gif答案

【问题标题】：Loading gif on Listview while its populating在填充时在 Listview 上加载 gif
【发布时间】：2016-09-23 13:30:53
【问题描述】：

我正在尝试在填充时在列表视图上添加加载 gif。我有一个列表视图，我们在其中选择一个类别，然后创建一个新的列表视图，其中所有数据都来自 ajax 调用&我正在使用 select2 进行多选项选择，但是当我选择数据时，需要花费大量时间来填充当时的列表页面在加载时变得无响应。

所以我希望用户知道它正在加载数据，所以他必须等待。所以我需要你的帮助来获取一些列表视图的例子。

【问题讨论】：

标签： jquery asp.net ajax vb.net

【解决方案1】：

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


more.addEventListener("click",function(){
	
	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);
			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{
	width: 10em;
	height: 10em;
	display: none;
	position: fixed;
	top: 5em;
	right: 1em;
	background: #212323;
	padding: 0.5em;
}

.loading.show{
	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">

【讨论】：

感谢您的回答，非常感谢。您可以修改代码，使其不使用按钮来显示 gif，而是当您用户在列表视图上选择一个选项时，它会在填充新列表视图时自动启动
你的意思是当用户几乎滚动到页面底部时，它会ajax请求？
我的意思是当列表视图最初加载时向用户显示数据正在加载，而不是当用户滚动数据时