“未捕获的引用错误：jQuery 未定义”，但仅限于某些屏幕分辨率（图像未加载）

Question

在Chromebook上查看我的网站（ASUS Chromebook Flip C302，完全更新）时，页面上的图像都不会加载。

https://rouxposter.com （Shopify商店）。

在Chrome Console中查看时，我会遇到四个错误：

Uncaught ReferenceError: jQuery is not defined
Uncaught ReferenceError: _ is not defined
Uncaught ReferenceError: $ is not defined
Uncaught t {_isScalar: false, _subscribe: ƒ}

但是，在其他设备（Mac桌面，Android手机）上查看网站时，根本没有问题。另外，当在控制台中使用设备工具栏（在Chromebook上）时，大多数设备预览选项都会使图像再次呈现，并且错误会消失。

在我的桌面Mac上，该站点可以完美加载。但是，如果我使用设备工具栏并将其设置为Nest Hub Max（1280 x 800），则该站点会像我的Chromebook上的网站断开，JQuery由于某种原因没有加载，并且没有加载图像。

阅读错误，看来它们都可能与jQuery没有加载或不够快地加载有关。我认为网站上的所有图像都是懒惰的，因此没有jQuery就无法正常工作。

我已经尝试将jQuery紧接在下面的下方移动，这一切都没有改变。

我已经在lambdatest.com上用不同的浏览器和配置测试了该站点，并能够重现图像的错误和不加载（尽管我不记得确切的设置，现在已经用完了免费的测试会话了）。

能够在台式机和lambdatest.com上重现错误，我非常有信心的问题不是我的特定Chromebook。此外，我想不出要想到的库，隐身或其他任何东西都不会清除卡车，或者在Chromebook上加载了图像（或使jQuery fire）加载（除非使用设备工具栏切换到不同的模拟屏幕分辨率）。

这些问题似乎与屏幕分辨率/大小有关。我的Chromebook以1920 x 1080 PX运行。当在Chrome控制台中使用设备工具栏时，问题似乎位于1280 x 800 PX左右。

我已经比较了两个状态的输出源代码（工作和不工作），我看到的唯一区别是看起来与未加载在非工作版本中的jQuery相关的东西。

我不知道屏幕分辨率如何影响jQuery的加载。不仅在CSS中，响应迅速的断点吗？ CSS会影响jQuery的负载吗？

当然，我担心某些客户会得到该网站的破碎版本，而这是一个Shopify网站，我不确定如何捕获这种错误（无访问日志）。

关于原因，补救措施或任何其他信息的任何建议将不胜感激！

Answer 1

我找到了问题的原因！

我的商店使用 javascript 来处理视差图像，结果发现主题开发人员错误地设置了“defer”，只需添加 而不是

这导致视差脚本在 jQuery 加载之前运行，但仅在某些屏幕方面运行，这就是为什么我很难重现该错误。