使用Layzr gem遇Uncaught ReferenceError: Layzr未定义问题求助

嘿，我来帮你搞定这个Layzr懒加载的问题！你遇到的Uncaught ReferenceError: Layzr is not defined错误，本质是浏览器找不到Layzr这个对象，大概率是加载顺序或者引入方式出问题了。咱们一步步排查解决：

首先检查你的Gemfile里有没有添加这个gem：

gem 'layzr.js'

如果没加，添上之后记得跑bundle install，不然gem根本没被纳入项目依赖。

你的application.js必须把Layzr的引入放在自定义初始化代码之前，比如：

//= require jquery
//= require jquery_ujs
//= require layzr.js  // 这一行必须加，而且要在你的初始化代码前面
//= require jquery.slick
//= require cropper
//= ... 其他依赖文件
//= require_tree .  // 如果你的Layzr初始化代码在这个目录下，Layzr得先被加载

顺序很重要！如果你的自定义代码在require_tree .里，Layzr没提前加载的话，浏览器执行到初始化代码时，Layzr还没被定义，自然会报错。

别直接裸写初始化代码，要等DOM加载完成后再执行，比如用原生JS：

document.addEventListener('DOMContentLoaded', function() {
  const layzr = new Layzr();
  layzr.update().check().handlers(true);
});

或者用jQuery的写法：

$(document).ready(function() {
  const layzr = new Layzr();
  layzr.update().check().handlers(true);
});

提前执行的话，不仅Layzr可能没加载，连页面上的图片元素都还没生成，自然没法正常工作。

Layzr默认会读取data-layzr属性作为实际图片地址，你的图片标签得这么写：

<img src="/path/to/default-placeholder.jpg" data-layzr="/path/to/actual-image.jpg" alt="图片描述">

如果你自己改了属性名，初始化时要对应配置：

const layzr = new Layzr({
  normal: 'data-your-custom-attr'  // 换成你实际用的属性名
});

Rails的资产缓存有时候会抽风，跑这两个命令清一下：

rails assets:clobber
rails assets:precompile  # 开发环境可以跳过，但生产环境必须跑

然后重启服务器，确保新的资产文件被加载。

如果还是不行，打开浏览器的Network标签，看看layzr.js有没有成功加载——要是显示404，说明资产管道没正确识别gem的文件，这时候可以试试手动把Layzr的JS文件拷贝到app/assets/javascripts目录下再引入。

内容的提问来源于stack exchange，提问作者Paul