Shopify

Question

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

由于使用了 .css:

，因此每一个都应该只显示各自的尺寸

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

custom.css

#usp-banner2{display:none}

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

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

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

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

Answer 1

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

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

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

上提供了更多内容

另一种解决方法可能是创建一个单独的样式表，其中仅包含 CSS 重置、隐藏和显示内容等规则，并通过 header 中的 link 标记包含它。

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

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