时间戳

首页 > 解决方案 > 如何在产品列表仍在 prestashop 中加载时显示加载图像

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

问题描述

负责加载产品列表的文件是 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>没有加载。

标签： javascriptjqueryajaxprestashopprestashop-1.6

解决方案

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

推荐阅读