Lazyload не работает при обновлении страницы Turbolinks (но работает при обычном обновлении страницы) - PullRequest
0 голосов
/ 03 ноября 2019

Я пытаюсь реализовать отложенную загрузку изображений в моем веб-приложении RoR, которое использует Turbolinks.

Я реализовал этот гем: https://github.com/jassa/lazyload-rails

Он работает отлично, как и предполагалось, еслиЯ делаю «жесткое» обновление сайта (которое вызывает document.ready), но оно не загружается, если страница загружается Turbolinks.

Я попытался изменить этот код в файле jquery.lazyload.js(строка 163):

    $(document).ready(function() {
      alert("Loaded");
        update();
    });

до

    $(document).on('turbolinks:load', function () {
      alert("Loaded");
        update();
    });

Но я не получаю никаких предупреждений в браузере при загрузке страницы Turbolinks, что заставляет меня поверить в скрипт lazyloadсам по себе даже не запускается, когда страница загружается с использованием Turbolinks.

Это мое приложение. js

//= require jquery2
//= require popper
//= require bootstrap
//= require rails-ujs
//= require turbolinks
//= require libs/dropzone.js
//= require Chart.bundle
//= require chartkick
//= require font_awesome5
//= require jquery.lazyload
//= require_tree .

$("img").lazyload();

И вот как я называю lazyload для изображения

<%= image_tag f.image, lazy: true %>

1 Ответ

0 голосов
/ 03 ноября 2019

Сам нашел решение.

Файл application.js вызывается только после жесткого обновления, поэтому при загрузке страницы через Turbolinks он не вызывает $ ("img"). Lazyload ()функция. Решил, добавив эту строку в заголовок в файле application.html.erb:

<script>
  $(document).on('turbolinks:load', function () {
    $("img").lazyload();
  });
  $('document').ready(function(){
    $("img").lazyload();
  });
</script>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...