Question

我想使用以下功能模糊页面：

var mainInfo;
function clonemain() {
    var Main = document.querySelector('#main');
    var Clone = Main.cloneNode(true);
    Clone.style.opacity=0;
    Clone.style.filter="blur(6px)";
    Clone.style.webkitFilter="blur(6px)";
    Clone.style.mozFilter="blur(6px)";
 }       
 document.querySelector('body').appendChild(Clone);
    return [Main,Clone];
}
function blurry(Main,Clone) {
    TweenLite.to(Main,0.25,{opacity:0});
    TweenLite.to(Clone,0.25,{opacity:1});
    Clone.style.display="block";
}

它复制了div，将其模糊并使用opacity = 0隐藏它。

问题是第一次不透明度变化并且重复发生时需要花费很多时间。下次动画加载时它可以正常工作。例如，可以使用页面加载时的“预处理”解决此问题，模糊然后立即将其恢复正常，但仍然需要相同的时间。

blurry(mainInfo[0],mainInfo[1]);
blurry(mainInfo[1],mainInfo[0]);

有人知道为什么会这样，以及如何解决这个问题？

修改：

我需要注意的是，即使我在下次加载页面时关闭选项卡而不是实际的浏览器，动画也能正常工作。

Answer 1

＆＃34;我知道它为什么会滞后我只想知道为什么它不会滞后第二次以及如何阻止滞后。＆＃34;

原因是网络浏览器的缓存： Web缓存是一种用于临时存储（缓存）Web文档（如HTML页面和图像）的机制，以减少带宽使用，服务器负载和感知延迟。

来源： wiki Web_cache

CSS模糊效果第一次花费太长时间

1 个答案: