我正在构建一个使用requestAnimationFrame进行视差滚动的网站.有多个部分,每个部分都有一个全尺寸的背景图像以及一些中间和前景图像.我通过requestAnimationFrame设法让这个动画变得相对流畅,但动画中仍然偶尔出现抖动.
通过在帧模式下观看Chrome的时间线,我可以看到导致"jank"的进程被标记为"Image Decode".此外,一旦动画完成一次,jank就不会重现.
似乎大多数浏览器现在都推迟了尚未查看的图像的解码.有没有一种方法可以预先解码(而不仅仅是预加载)图像,而不会让用户看到它们?
我正在根据标题结构制作一个有序列表样式的目录,这样:
<h1>lorem</h1>
<h2>ipsum</h2>
<h2>dolor</h2>
<h3>sit</h3>
<h2>amet</h2>
Run Code Online (Sandbox Code Playgroud)
变为:
这就是我目前正在做的事情:
$('h1, h2, h3, h4, h5, h6').each ()->
# get depth from tag name
depth = +@nodeName[1]
$el = $("<li>").text($(this).text())
do get_recursive_depth = ()->
if depth is current_depth
$list.append $el
else if depth > current_depth
$list.append( $("<ol>") ) unless $list.children().last().is('ol')
$list = $list.children().last()
current_depth += 1
get_recursive_depth()
else if depth < current_depth
$list = $list.parent()
current_depth -=1
get_recursive_depth()
Run Code Online (Sandbox Code Playgroud)
哪个有效,但似乎缺乏优雅.是否有更智能/更快/更强大的方法来做到这一点?