Lazyload не работает с бесконечной прокруткой - Ruby на Rails - PullRequest
Новая
       50

Lazyload не работает с бесконечной прокруткой - Ruby на Rails

1 голос
/ 14 июля 2020

Я хочу создать бесконечную функциональность прокрутки в моем Ruby on Rails приложении. Для этого я использую Stimulus JS (дополнительная информация: здесь ), vanilla-lazyload js (дополнительная информация: здесь ) и pagy gem (дополнительная информация: здесь ) (включая webpacker). Все работает отлично, однако вроде vanilla-lazyload js перестает работать при бесконечной прокрутке.

Вот моя настройка. index вид (я использую HAML): 

%section(class="section section--tight" data-controller="infinite-scroll")
  %div(class="section-body")
    %div(class="content content--shot")
        %div(class="shots-grid" data-target="infinite-scroll.entries")
            = render partial: "shots/shot", collection: @shots, cache: true

  %div(class="section-pagination")
    %div(class="content")
        %div(data-target="infinite-scroll.pagination")
            != pagy_nav @pagy

JS контроллер - infinite_scroll_controller.js: 

import { Controller } from "stimulus"

export default class extends Controller {
  static targets = ["entries", "pagination"]

  initialize() {
    let options = {
      rootMargin: '500px',
    }

    this.intersectionObserver = new IntersectionObserver(entries => this.processIntersectionEntries(entries), options)
  }

  connect() {
    this.intersectionObserver.observe(this.paginationTarget)
  }

  disconnect() {
    this.intersectionObserver.unobserve(this.paginationTarget)
  }

  processIntersectionEntries(entries) {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        this.loadMore()
      }
    })
  }

  loadMore() {
    let next_page = this.paginationTarget.querySelector("a[rel='next']")
    if (next_page == null) { return }
    let url = next_page.href

    Rails.ajax({
      type: 'GET',
      url: url,
      dataType: 'json',
      success: (data) => {
        this.entriesTarget.insertAdjacentHTML('beforeend', data.entries)
        this.paginationTarget.innerHTML = data.pagination
      }
    })
  }
}

Ленивая загрузка vanilla-lazyload: 

// https://github.com/verlok/lazyload
import LazyLoad from "vanilla-lazyload";

document.addEventListener('turbolinks:load', () => {
    var lazyLoadInstance = new LazyLoad({
        elements_selector: ".lazy",
        cancel_on_exit: true,
        use_native: false
    });
})

Представление контроллера: 

def index
    @pagy, @shots = pagy Shot.is_recent.includes(:user).all

    respond_to do |format|
      format.html
      format.json {
      render json: { entries: render_to_string(partial: "shots/shot", collection: @shots, formats: [:html]), pagination: view_context.pagy_nav(@pagy) }
  }
    end
end

На веб-сайте pagy gem сказано, что гем требует установки для webpacker [вот ссылка] [4]. Однако похоже проблема в turbolinks. Другими словами, vanillay-lazyload работает с самыми первыми 10 записями, однако с вновь добавленными (записи с разбитых на страницы) записями он отказывается работать. Возможно, я что-то упускаю? Спасибо за вашу помощь и время.

1 Ответ

1 голос
/ 14 июля 2020

JS контроллер - infinite_scroll_controller. js:

Обновить loadmore функцию, после Rails.ajax успешного вызова снова запустить LazyLoad

Добавить новый код ниже 

new LazyLoad({
   elements_selector: ".lazy",
   cancel_on_exit: true,
   use_native: false
});

loadMore() {
    let next_page = this.paginationTarget.querySelector("a[rel='next']")
    if (next_page == null) { return }
    let url = next_page.href

    Rails.ajax({
      type: 'GET',
      url: url,
      dataType: 'json',
      success: (data) => {
        this.entriesTarget.insertAdjacentHTML('beforeend', data.entries);
        this.paginationTarget.innerHTML = data.pagination;
        new LazyLoad({
          elements_selector: ".lazy",
          cancel_on_exit: true,
          use_native: false
        });
      }
    })
  }
...