如何在桌面上只加载 Shopify Section 元素？

Question

我的目标网页上有几个视频标签显示在桌面设备上，但我想在移动设备上隐藏它们。我目前正在使用视觉上有效的 CSS 来执行此操作，但 display:none 不会阻止视频实际加载，这会破坏要点（提高页面速度，减少数据使用等）。我尝试在我的自定义 Shopify 部分的 {% javascript %} 架构部分中使用以下 javascript，但它无法正常工作并且在我查看 Chrome 中的网站源代码时没有显示。

if ($(window).width() > 767) {
   $( ".case-study-bg-video" ).append( $( "<source src='{{ section.settings.video_url }}' type='video/mp4'>" ) );
}

.case-study-bg-video 是一个 html 视频标签，目标是仅在屏幕尺寸大于 767px 时加载源标签。提前致谢！

Answer 1

关键是脚本在节文件中的位置。我没有将它包装在 {% Javascript %} 模式部分，而是将它放在模式上方的标记中并将其包装在以下内容中：

document.addEventListener('DOMContentLoaded', function(){  /** your code here **/   })

然后为了解决同一页面上多个部分的问题，我附加了 {{ section.id }} 以在正确的位置添加视频。

如何在桌面上只加载 Shopify Section 元素？

How can I only load a Shopify Section element on desktop?

javascript

shopify