Blueimp Gallery - 缩略图指示器问题答案

【问题标题】：Blueimp Gallery - Thumbnail Indicator IssueBlueimp Gallery - 缩略图指示器问题
【发布时间】：2015-07-23 02:52:37
【问题描述】：

我使用blueimp gallery 的jQuery 版本。我在幻灯片页面上使用延迟加载来在用户滚动时加载缩略图。由于在初始页面加载时未加载所有缩略图，并且折叠下方的缩略图不会显示在 blueimp 画廊的缩略图指示器中，因此我在链接标签上设置 data-thumbnail 属性，如下所示：

<a href="photos/1-full.jpg" data-thumbnail="photos/1-thumb.jpg">
  <img data-original="photos/1-thumb.jpg" alt="Image 1" />
</a>

但是，它似乎仍然尝试从图像标签的 src 属性加载缩略图，这是延迟加载设置的占位符图像。

我做得对吗？

【问题讨论】：

标签： jquery blueimp jquery-lazyload

【解决方案1】：

这实际上涉及更改 blueimp Gallery 脚本本身。变化如下：

--- a/js/blueimp-gallery-indicator.js
+++ b/js/blueimp-gallery-indicator.js
@@ -58,10 +58,10 @@
                 thumbnail;
             if (this.options.thumbnailIndicators) {
                 thumbnail = obj.getElementsByTagName && $(obj).find('img')[0];
-                if (thumbnail) {
-                    thumbnailUrl = thumbnail.src;
-                } else if (thumbnailProperty) {
+                if (thumbnailProperty) {
                     thumbnailUrl = this.getItemProperty(obj, thumbnailProperty);
+                } else if (thumbnail) {
+                    thumbnailUrl = thumbnail.src;
                 }
                 if (thumbnailUrl) {
                     indicator.style.backgroundImage = 'url("' + thumbnailUrl + '")';
             }

然后将此更改传播到任何缩小的文件。

【讨论】：