时间戳

首页 > 解决方案 > Lazyload 不适用于 Turbolinks 页面刷新（但适用于正常页面刷新）

ruby-on-rails-5 - Lazyload 不适用于 Turbolinks 页面刷新（但适用于正常页面刷新）

问题描述

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

我已经实现了这个 gem：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();

这就是我在图像上调用延迟加载的方式

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

标签： ruby-on-rails-5turbolinksjquery-lazyload

解决方案

自己找到了解决方案。

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

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

推荐阅读