如何在prestashop中加载产品列表时显示加载图像

Question

负责加载产品列表的文件是product-list.tpl，我需要编辑product-list.tpl（prestashop / modules / product-list.tpl）来显示加载图像，直到产品列表完全加载。

tag负责加载位于<!-- Products list -->下的产品清单：

<ul{if isset($id) && $id} id="{$id}" {/if} class="product_list grid row{if isset($class) && $class} {$class}{/if}{if isset($active) && $active == 1} active{/if} not-animated" data-animate="fadeInLeft" data-delay="200">
{foreach from=$products item=product name=products}
    {math equation="(total%perLine)" total=$smarty.foreach.products.total perLine=$nbItemsPerLine assign=totModulo}

完整代码在这里：uLb1Hkaf

我尝试了很多JavaScript / jquery / ajax方法，但没有运气。 所以大家请帮我添加JavaScript / jquery / ajax，显示在<ul>未加载的情况下加载图片。

Answer 1

它有点凌乱。请重新格式化发布完整的代码快照。您可以做的一件事是，而不是在页面加载时加载完整的产品列表;使用ajax加载它。在页面完全加载后显示产品列表，运行js函数（执行产品列表的ajax代码）。在ajax beforsend方法中，您可以显示加载图像，直到产品列表生成。在ajax成功生成的产品列表后，将其附加到UL标记。

Answer 2

好的，我通过使用这个例子here找到了解决方案。

非常感谢所有人。