0

所以我正在使用Prinzhorn skrollr创建一个网站，其中包含文本和图像随着页面的滚动或滑动而滚动。一切正常，但我想我发现了一个性能错误。skrollr 的工作方式是使用带有数字作为名称的数据属性，而数字是动画应该发生的点。数据属性的值是 css 规则。

我必须使用display:none一些隐藏或可见的代码块，具体取决于屏幕大小。这是 b/c 数据属性中的数字有时对于移动屏幕来说太大并且动画发生在错误的时间。

无论如何，问题是隐藏的代码块中的 css 正在计算，即使该块设置为display:none.

在下面的代码中，您可以看到移动导航块在桌面宽度下在 Chrome 的开发工具中重新计算的不透明度。

<nav>
<!-- === Desktop and tablet === -->
<div class="hide-for-small">
  <a id="menu-btn" href="#">
    <img src="/assets/img/menu-btn.png" alt="Menu" data-600="opacity:1" data-620="opacity:0" />
    <img src="/assets/img/menu-btn-alt.png" alt="Menu" data-600="opacity:0" data-620="opacity:1 />
  </a>
</div>
<!-- === End Desktop and tablet === -->

<!-- === Mobile === -->
<div class="show-for-small">
  <a id="menu-btn" href="#">
    <img src="/assets/img/menu-btn.png" alt="Menu" data-560="opacity:1" data-580="opacity:0" />
    <img src="/assets/img/menu-btn-alt.png" alt="Menu" data-560="opacity:0" data-580="opacity:1" />
  </a>
</div>
<!-- === End Mobile === -->

关于如何防止这种情况的任何想法？就像我说的那样，一切看起来和工作都很好，但我注意到移动设备有一些轻微的滞后，我打赌它是 b/c 设备必须进行两次相同的计算。

4

0 回答 0