Question

我正在尝试在使用Turbolink的RoR Web应用程序中实现图像的延迟加载。

我已经实现了以下宝石：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页面加载时，在浏览器中没有收到任何警报，这使我相信在使用Turbolinks加载页面时，甚至不会触发lazyload脚本本身。

这是我的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文件的标题中来解决此问题：

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

Lazyload在Turbolinks页面刷新上不起作用（但在常规页面刷新上起作用）

1 个答案: