Lazyload 不适用于 Turbolinks 页面刷新（但适用于正常页面刷新）

Question

我正在尝试在我的 RoR 网络应用程序中实现图像延迟加载，它使用了 Turbolinks。

我已经实现了 gem：https://github.com/jassa/lazyload-rails

如果我对网站进行 "hard" 刷新（触发 document.ready），它会按预期完美运行，但如果页面由 Turbolinks 加载，它不会加载。

我尝试在 jquery.lazyload.js 文件（第 163 行）中更改此代码：

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

至

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

但是当我执行 Turbolinks 页面加载时，我在浏览器中没有收到任何警报，这让我相信 lazyload 脚本本身甚至在使用 Turbolinks 加载页面时都不会被触发。

这是我的application.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 %>

Answer 1

自己找到了解决方案。

application.js 文件只会在硬刷新时调用，因此当通过 Turbolinks 加载页面时，它不会调用 $("img").lazyload() 函数。通过将此行添加到 application.html.erb 文件中的 header 来解决它：

<script>
  $(document).on('turbolinks:load', function () {
    $("img").lazyload();
  });
  $('document').ready(function(){
    $("img").lazyload();
  });
</script>

Lazyload 不适用于 Turbolinks 页面刷新（但适用于正常页面刷新）

Lazyload not working on Turbolinks page refresh (but works on normal page refresh)

turbolinks

jquery-lazyload

ruby-on-rails-5