Как использовать Bootstrap для Lazy при загрузке изображений, выглядящих в виде интереса, с помощью движка шаблонов thymeleaf - PullRequest
Новая
       24

Как использовать Bootstrap для Lazy при загрузке изображений, выглядящих в виде интереса, с помощью движка шаблонов thymeleaf

0 голосов
/ 08 октября 2018

У меня следующий загрузочный код для представления изображений, похожих на проценты.Я использую шаблонный движок тимелина.У меня есть много изображений, чтобы показать.Я испытываю медленную загрузку многих проблем с изображениями.Я искал изображение ленивой загрузки.Есть такие подходы, как использование data-src, data-echo.Однако я использую thymeleaf для динамического разрешения URL-адреса изображения во время выполнения, поэтому для изображения src необходимо указать атрибут th: src, как показано ниже.Следовательно, data-src и data-echo у меня не работают.Поиск в Интернете, нет никаких ленивых загрузочных обсуждений, связанных с тимилифом.

Кто-нибудь знает, как решить эту проблему с загрузкой многих изображений? 

  <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>

1 Ответ

0 голосов
/ 08 октября 2018

Нет причин, по которым вы не можете использовать атрибуты 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} + '\')'" />
...