代码之家 › 专栏 › 技术社区 › iceiceicy

在等待加载事件完成时使用jquery显示加载微调器

html jquery

iceiceicy · 技术社区 · 6 年前

我创建了一个ul,其中包含指向其他页面的几个链接。然后,我使用jQuery只在单击所有链接时加载.products网格类容器。这样,就不会重新加载页面,只会显示.products网格中的内容。

它工作得很好。但是,如何在等待显示内容时添加加载微调器。因为,内容不会立即显示,所以我想首先显示加载微调器以获得更好的用户体验。

这是ul的HTML代码

<div class="tagcloud">
  <ul class="tag-widget">
    <li>
    <a href="http://iceiceicy.com/wingwah/">All Watches</a>
    </li>
    <li>
    <a href="http://iceiceicy.com/wingwah/product-tag/general-sport/">General 
Sport</a>
    </li>
    <li>
    <a href="http://iceiceicy.com/wingwah/product- 
tag/chronograph/">Chronograph</a>
    </li>
    <li>
    <a href="http://iceiceicy.com/wingwah/product-tag/military/">Military</a>
    </li>
  </ul> 
</div>

这是jquery

jQuery(document).ready(function( $ ){
  $('.tag-widget a').click(event => {
    event.preventDefault()
    $('.products-grid').load(`${event.target.href} .products-grid`)
  })
});

我找到了这个方法,但是不知道在哪里/如何使用它,或者对上面的jquery实现它实际上是正确的。

var $loading = $('#loadingDiv').hide();
$(document).ajaxStart(function () {
  $loading.show();
})
.ajaxStop(function () {
  $loading.hide();
});

1 回复 | 直到 6 年前

Liftoff 6 年前

//Show your loading spinner here
$(".loading-spinner").show();

$('.products-grid').load(`${event.target.href} .products-grid`, function(){
    //Hide your loading spinner here
    $(".loading-spinner").hide();
});