"Uncaught ReferenceError: jQuery is not defined", but only at certain screen resolutions (images not loading)
"Uncaught ReferenceError: jQuery is not defined", but only at certain screen resolutions (images not loading)
在 Chrome 书籍（ASUS Chromebook Flip C302，完全更新）上查看我的网站时，将加载页面上 none 的图像。
https://rouxposter.com（Shopify 商店）。
查看 Chrome 控制台时，我收到四个错误：
Uncaught ReferenceError: jQuery is not defined
Uncaught ReferenceError: _ is not defined
Uncaught ReferenceError: $ is not defined
Uncaught t {_isScalar: false, _subscribe: ƒ}
但是，在我的其他设备（Mac 台式机，Android phone）上查看网站时，完全没有问题。此外，当使用控制台中的设备工具栏时（在 Chrome 书中），大多数设备预览选项将使图像再次呈现，并且错误消失。
在我的桌面上 Mac，网站加载完美。但是，如果我使用设备工具栏并将其设置为 Nest Hub Max (1280 x 800)，网站就会像我的 Chrome 书籍一样中断，jQuery 由于某种原因无法加载并且没有图像已加载。
仔细阅读错误，它们似乎都与 jQuery 未加载或加载速度不够快有关。我认为网站上的所有图片都是延迟加载的，所以没有 jQuery.
它们就无法工作是有道理的
我试过将 jQuery 移动到
的正下方，但没有任何改变。
我已经在 lambdatest.com 上用不同的浏览器和配置测试了该站点，并且能够重现错误和未加载图像（尽管我不记得确切的设置并且现在 运行 免费测试会话）。
能够在桌面和 lambdatest.com 上重现该错误，我相当确信问题不在我特定的 Chrome 书中。此外，没有清除缓存、进入隐身模式或任何其他我能想到的使 Chrome 书籍上的图像加载（或使 jQuery 正确触发）（除了使用设备工具栏切换到不同的模拟屏幕分辨率）。
这些问题似乎与屏幕有关 resolution/size。我的 chromebook 运行s 在 1920 x 1080 像素。在 Chrome 控制台中使用设备工具栏时，问题似乎位于 1280 x 800 像素左右。
我已经比较了两种状态（工作和非工作）的输出源代码，我能看到的唯一区别是看起来与 jQuery 未加载非工作状态相关的内容-工作版本。
我不知道屏幕分辨率如何影响 jQuery 的加载。响应断点不仅在CSS吗？ CSS 会影响 jQuery 的加载吗？
当然，我担心一些客户会得到这个损坏的网站版本，而且这是一个 Shopify 网站，我不确定如何捕获此类错误（无法访问日志）。
任何有关原因、补救措施或任何其他信息的建议，我们将不胜感激！
我找到了问题的原因！
我的商店使用 javascript 作为视差图像，结果发现主题开发者设置错误 'defer'，只是添加 <link defer> 而不是 <link defer="defer">。
这导致视差脚本在 jQuery 加载之前 运行，但仅在某些屏幕方面，这就是为什么我很难重现错误。
在 Chrome 书籍（ASUS Chromebook Flip C302，完全更新）上查看我的网站时，将加载页面上 none 的图像。
https://rouxposter.com（Shopify 商店）。
查看 Chrome 控制台时，我收到四个错误：
Uncaught ReferenceError: jQuery is not defined
Uncaught ReferenceError: _ is not defined
Uncaught ReferenceError: $ is not defined
Uncaught t {_isScalar: false, _subscribe: ƒ}
但是，在我的其他设备（Mac 台式机，Android phone）上查看网站时，完全没有问题。此外，当使用控制台中的设备工具栏时（在 Chrome 书中），大多数设备预览选项将使图像再次呈现，并且错误消失。
在我的桌面上 Mac，网站加载完美。但是，如果我使用设备工具栏并将其设置为 Nest Hub Max (1280 x 800)，网站就会像我的 Chrome 书籍一样中断，jQuery 由于某种原因无法加载并且没有图像已加载。
仔细阅读错误，它们似乎都与 jQuery 未加载或加载速度不够快有关。我认为网站上的所有图片都是延迟加载的，所以没有 jQuery.
它们就无法工作是有道理的我试过将 jQuery 移动到
的正下方，但没有任何改变。我已经在 lambdatest.com 上用不同的浏览器和配置测试了该站点，并且能够重现错误和未加载图像（尽管我不记得确切的设置并且现在 运行 免费测试会话）。
能够在桌面和 lambdatest.com 上重现该错误，我相当确信问题不在我特定的 Chrome 书中。此外，没有清除缓存、进入隐身模式或任何其他我能想到的使 Chrome 书籍上的图像加载（或使 jQuery 正确触发）（除了使用设备工具栏切换到不同的模拟屏幕分辨率）。
这些问题似乎与屏幕有关 resolution/size。我的 chromebook 运行s 在 1920 x 1080 像素。在 Chrome 控制台中使用设备工具栏时，问题似乎位于 1280 x 800 像素左右。
我已经比较了两种状态（工作和非工作）的输出源代码，我能看到的唯一区别是看起来与 jQuery 未加载非工作状态相关的内容-工作版本。
我不知道屏幕分辨率如何影响 jQuery 的加载。响应断点不仅在CSS吗？ CSS 会影响 jQuery 的加载吗？
当然，我担心一些客户会得到这个损坏的网站版本，而且这是一个 Shopify 网站，我不确定如何捕获此类错误（无法访问日志）。
任何有关原因、补救措施或任何其他信息的建议，我们将不胜感激！
我找到了问题的原因！
我的商店使用 javascript 作为视差图像，结果发现主题开发者设置错误 'defer'，只是添加 <link defer> 而不是 <link defer="defer">。
这导致视差脚本在 jQuery 加载之前 运行，但仅在某些屏幕方面，这就是为什么我很难重现错误。