Photoswipe 不显示 Rails 应用中的某些图像

Question

我有一个图片库，单击它们即可打开 Photoswipe。当我开始列出图像时，其中一些没有显示，我只能看到黑屏而不是图像。但是当我重新加载页面时，单击图像 - 所有这些都显示在 Photoswipe 滑块中。这是我页面的代码：

<div class="row collapse full-width gallery-images" data-amount="<%= images.length %>">
  <% images.each_with_index do |image, index| %>
    <% if (index + 1) % 5 == 0 || (index + 2) % 5 == 0 %>
      <div class="large-6 columns">
        <%= link_to image_tag(image.file_name.url(:gallery),
                              alt: File.basename(image.file_name.url),
                              class: 'gallery-item'), '#' %>
      </div>
    <% else %>
      <div class="large-4 columns">
        <%= link_to image_tag(image.file_name.url(:gallery),
                              alt: File.basename(image.file_name.url),
                              class: 'gallery-item'), '#' %>
      </div>
    <% end %>
  <% end %>
</div>

<script>
  let galleryImages = $('.gallery-item');
  let galleryImagesArray = [];

  function collectArrayOfImages(image, array) {
    let imageSrc = image.attr('src');
    let img = new Image();
    img.src = imageSrc;
    array.push({
      src: imageSrc,
      w: img.width,
      h: img.height
    })
  }

  galleryImages.each(function () {
    collectArrayOfImages($(this), galleryImagesArray);
  });

  function photoswipeInit(e, i, array) {
    e.preventDefault();
    // init Photoswipe

    let pswpElement = document.querySelectorAll('.pswp')[0];

    // build items array
    let items = array;

    // define options (if needed)
    let options = {
      // optionName: 'option value'
      // for example:
      index: i, // start at first slide
      history: false
    };

    // Initializes and opens PhotoSwipe
    let gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
    gallery.init();
  }

  for(let i = 0; i < galleryImages.length + 1; i++) {
    galleryImages.eq(i).click(function (e) {
      photoswipeInit(e, i, galleryImagesArray);
    });
  }
</script>

可以turbolinks，如果可以，我该如何解决？有什么想法吗？先谢谢了。

Answer 1

我发现图像数组中的宽度和高度设置为 0。所以我不得不将我的函数放入 setTimeout:

function collectArrayOfImages(image, array) {
    setTimeout(() => {
      let imageSrc = image.attr('src');
      let img = new Image();
      img.src = imageSrc;
      array.push({
        src: imageSrc,
        w: img.width,
        h: img.height
      });
    }, 1000);
  }

看来，由于某种原因，该函数无法处理填充数组的过程。

Photoswipe 不显示 Rails 应用中的某些图像

Photoswipe doesn't display some images in Rails app

ruby-on-rails

photoswipe