Question

我创建了一个ul，其中包含指向其他页面的多个链接。然后，当所有链接都被单击时，我使用jQuery仅加载.products-grid类容器。这样，就不会发生页面重新加载，而仅显示.products-grid内部的内容。

运行良好。但是，如何在等待内容显示时添加加载微调器。因为内容不会立即显示，所以我想先显示加载微调器，以获得更好的用户体验。

这是ul的HTML代码

这是jQuery

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

Answer 1

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

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

1 个答案: