fix(photos): 修复pjax加载图片失败问题

This commit is contained in:
nineya 2023-09-14 18:08:37 +08:00
parent a7f5063869
commit f737f24638

View File

@ -10,7 +10,7 @@
<a th:each="group : ${groups}" th:class="${#strings.equals(param.group, group.metadata.name)? 'item active' : 'item'}" th:href="@{/photos(group=${group.metadata.name})}" th:text="${group.spec.displayName}"></a> <a th:each="group : ${groups}" th:class="${#strings.equals(param.group, group.metadata.name)? 'item active' : 'item'}" th:href="@{/photos(group=${group.metadata.name})}" th:text="${group.spec.displayName}"></a>
</div> </div>
</div> </div>
<div class="photos-gallery load-block"> <div class="photos-gallery load-block loading">
<div th:each="photo : ${photos.items}" th:href="${photo.spec.url}" data-fancybox="gallery" th:data-caption="${#strings.defaultString(photo.spec.description, photo.spec.displayName)}"> <div th:each="photo : ${photos.items}" th:href="${photo.spec.url}" data-fancybox="gallery" th:data-caption="${#strings.defaultString(photo.spec.description, photo.spec.displayName)}">
<img width="100%" height="100%" th:src="${photo.spec.url}" th:alt="${photo.spec.displayName}"/> <img width="100%" height="100%" th:src="${photo.spec.url}" th:alt="${photo.spec.displayName}"/>
<div class="info"> <div class="info">
@ -27,9 +27,9 @@
</div> </div>
</div> </div>
<th:block th:replace="~{main/pagination :: pagination (${photos}, '/photos')}"/> <th:block th:replace="~{main/pagination :: pagination (${photos}, '/photos')}"/>
</th:block>
</th:block>
<script> <script>
var timer = setInterval(() => {
if($.fn.justifiedGallery) {
$('.photos-gallery') $('.photos-gallery')
.justifiedGallery({ .justifiedGallery({
rowHeight: 200, rowHeight: 200,
@ -43,4 +43,10 @@
extension: /\.(jpe?g|png|gif|bmp|webp)$/, extension: /\.(jpe?g|png|gif|bmp|webp)$/,
cssAnimation: false, cssAnimation: false,
}) })
$('.photos-gallery.loading').removeClass('loading')
clearInterval(timer);
}
}, 500);
</script> </script>
</th:block>
</th:block>