Question

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

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

Answer 1

＆＃13;

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();

});

＆＃13;

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;
}

＆＃13;

<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">

＆＃13;

在Listview上填充gif

1 个答案: