时间戳

首页 > 解决方案 > 如何仅在桌面上加载 Shopify 部分元素？

javascript - 如何仅在桌面上加载 Shopify 部分元素？

问题描述

我的登陆页面上有一些视频标签显示在桌面上，但我想在移动设备上隐藏它们。我目前正在使用具有视觉效果的 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. 提前致谢！

标签： javascriptshopify

解决方案

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

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

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

推荐阅读