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

templates/photos.html

@@ -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>
             </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)}">
                 <img width="100%" height="100%" th:src="${photo.spec.url}" th:alt="${photo.spec.displayName}"/>
                 <div class="info">
@@ -27,20 +27,26 @@
             </div>
         </div>
         <th:block th:replace="~{main/pagination :: pagination (${photos}, '/photos')}"/>
+        <script>
+            var timer = setInterval(() => {
+                if($.fn.justifiedGallery) {
+                    $('.photos-gallery')
+                      .justifiedGallery({
+                          rowHeight: 200,
+                          maxRowHeight: false,
+                          maxRowsCount: 0,
+                          sizeRangeSuffixes: {},
+                          lastRow: 'nojustify',
+                          captions: false,
+                          waitThumbnailsLoad: true, //等待图片加载完，这样就可以根据图片比例展示，如果为false，则都是统一比例
+                          margins: 10,
+                          extension: /\.(jpe?g|png|gif|bmp|webp)$/,
+                          cssAnimation: false,
+                      })
+                    $('.photos-gallery.loading').removeClass('loading')
+                    clearInterval(timer);
+                }
+            }, 500);
+        </script>
     </th:block>
 </th:block>
-<script>
-    $('.photos-gallery')
-      .justifiedGallery({
-          rowHeight: 200,
-          maxRowHeight: false,
-          maxRowsCount: 0,
-          sizeRangeSuffixes: {},
-          lastRow: 'nojustify',
-          captions: false,
-          waitThumbnailsLoad: true, //等待图片加载完，这样就可以根据图片比例展示，如果为false，则都是统一比例
-          margins: 10,
-          extension: /\.(jpe?g|png|gif|bmp|webp)$/,
-          cssAnimation: false,
-      })
-</script>