我有 2 个促销横幅，一个用于桌面(#usp 横幅(，一个用于移动设备(#usp-banner2(。
由于使用了.css，每个都应仅显示到各自的大小：
布局.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 秒后隐藏。Source:https://www.ivyandfig.com
我对 Shopify 相当陌生，但能够修改模板。我很好奇这是由于.css加载方式造成的吗？
有人对如何确保在图像显示之前加载 css 有建议(因为我假设这是正在发生的事情的一部分(？
您网站上的大多数样式表和脚本都是通过JavaScript加载的。与初始内容在您的网站上可见时相比，该 JavaScript 的触发时间要晚得多。
正如您所猜测的，发生这种情况是因为CSS加载得很晚，因此暂时两个图像都是可见的。
由于该部分是 Shopify 部分，快速解决方法是在部分中包含相关的 CSS 规则。更多内容可在 Shopify 部分文档。
另一个解决方法可能是创建一个单独的样式表，仅包含CSS重置，隐藏和显示内容等规则，并通过标题中的链接标签将其包含在标题中。
您还可以使用一些基于内联样式的逻辑，最初隐藏两者，然后通过 JavaScript 显示。