如何使用 Bootstrap 来使用 thymeleaf 模板引擎延迟加载看起来像 pinterest 的图像

Question

我有以下 bootstrap 代码来呈现类似图片的 pinterest。我正在使用 thymeleaf 模板引擎。我有很多图片要展示。我遇到了很多图片下载缓慢的问题。我搜索了图像延迟加载。有一些方法，例如使用 data-src、data-echo。但是，我使用 thymeleaf 在运行时动态解析图像 URL，因此需要将图像 src 指定为 th:src 属性，如下所示。因此，data-src 和 data-echo 对我不起作用。在网上搜索，没有thymeleaf相关的懒加载讨论。

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

  <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} + '\')'" />

如何使用 Bootstrap 来使用 thymeleaf 模板引擎延迟加载看起来像 pinterest 的图像

How to use Bootstrap to Lazy loading pinterest looking images with thymeleaf template engine

bootstrap-4

thymeleaf

lazy-loading

pinterest