css - Shopify - 移动图像在桌面上加载 1 秒 - 即使它是隐藏的

Question

我有 2 个促销横幅，一个用于桌面 (#usp-banner)，一个用于移动 (#usp-banner2)。

由于使用了 .css，每一个都应该只显示它​​们各自的尺寸:

layout.min.css#usp-banner2{display:none}html{padding-bottom:0!important}...

自定义.css

#usp-banner2{display:none}

@media (max-width:767px){
  #usp-banner{display:none!important}
  #usp-banner2{display:inline}
}

在桌面或移动设备上加载页面后，我们会看到两个横幅，并且它们的正确横幅会在大约 1 秒后隐藏。 来源: https://www.ivyandfig.com

我是 Shopify 的新手，但可以修改模板。我很好奇这是不是因为 .css 的加载方式？

有人对如何确保在图像显示之前加载 css 有建议吗(因为我假设这是正在发生的事情的一部分)？

Answer 1

您网站上的大部分样式表和脚本都是通过 JavaScript 加载的。与初始内容在您的网站上可见时相比，JavaScript 的触发时间要晚得多。

正如您所猜到的，发生这种情况是因为 CSS 的加载时间很晚，所以目前两张图片都可见。

由于该部分是 Shopify 部分，因此快速修复是在部分内包含相关的 CSS 规则。更多内容可在 Shopify Documentation for Sections 上找到.

另一个修复可能是创建一个单独的样式表，仅包含 CSS 重置、隐藏和显示内容等规则，并通过标题中的链接标记包含它。

您还可以使用一些基于内联样式的逻辑，方法是先隐藏它们，然后再通过 JavaScript 显示。