如何使用引导程序延迟加载pinterest查找图像与百里香叶模板引擎

Question

我有以下引导代码来呈现像pinterest一样的图像。我正在使用百里香叶模板引擎。我有很多图像要展示。我遇到下载许多图像缓慢的问题。我已经搜索了图像延迟加载。有一些方法，例如使用data-src，data-echo。但是，我正在使用百里香叶在运行时动态解析图像 URL，因此需要将图像 src 指定为 th：src 属性，如下所示。因此，数据源和数据回显对我不起作用。在网络上搜索，没有与百里香叶相关的延迟加载讨论。

有人知道如何解决这么多图像下载问题吗？

<div class="container">
<div class="row">
<div class="card-columns">
<div class="card card-pin" th:each="product : ${Products}">
<img class="card-img" id="productDetail" th:src="${product.href}" alt="Card image" th:onclick="'getProductDetail('' + ${product.itemNumber} + '')'" />
<span class="text-justify" th:text="${product.name}">productName</span>
</div>
</div>
</div>
</div>

Answer 1

没有理由不能使用data-src和data-echo属性。 只需在它们前面加上th:. 喜欢这个：

<img class="card-img" id="productDetail" th:data-src="${product.href}" alt="Card image" th:onclick="'getProductDetail('' + ${product.itemNumber} + '')'" />

或

<img class="card-img" id="productDetail" th:data-echo="${product.href}" alt="Card image" th:onclick="'getProductDetail('' + ${product.itemNumber} + '')'" />