JavaScript内存问题+；CSS3动画。如何改进？_Javascript_Jquery_Memory Leaks_Css Animations

JavaScript内存问题+；CSS3动画。如何改进？

javascript jquery memory-leaks

JavaScript内存问题+；CSS3动画。如何改进？,javascript,jquery,memory-leaks,css-animations,Javascript,Jquery,Memory Leaks,Css Animations,我已经创建了一个动画循环。一旦一个动画完成，它就会触发下一个动画，以此类推。似乎当我保持浏览器打开1-2分钟时，它开始变慢，消耗越来越多的资源，直到我的兄弟回答得很慢，动画几乎不再运行。我怎样才能防止这种情况发生？这是我的密码： <!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> html, body { margin: 0; }

我已经创建了一个动画循环。一旦一个动画完成，它就会触发下一个动画，以此类推。似乎当我保持浏览器打开1-2分钟时，它开始变慢，消耗越来越多的资源，直到我的兄弟回答得很慢，动画几乎不再运行。我怎样才能防止这种情况发生？这是我的密码：

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
html, body {
    margin: 0;
}
.shared {
    position: absolute;
    opacity: 0;
}
img#article-02 {
    top: 0;
    left: 0;
    width: 205px;
    height: 205px;
}
img#article-03 {
    top: 227px;
    left: 0;
    width: 205px;
    height: 205px;
}
img#article-04 {
    top: 318px;
    left: 227px;
    width: 431px;
    height: 114px;
}
@-webkit-keyframes article2 {
0%   {opacity: 0;}
10%  {opacity: 1;}
60%  {opacity: 1;}
70%  {opacity: 0;}
100% {opacity: 0;}
}
@-webkit-keyframes article3 {
0%   {opacity: 0;}
20%  {opacity: 1;}
70%  {opacity: 1;}
80%  {opacity: 0;}
100% {opacity: 0;}
}
@-webkit-keyframes article4 {
0%   {opacity: 0;}
30%  {opacity: 1;}
80%  {opacity: 1;}
90%  {opacity: 0;}
100% {opacity: 0;}
}
</style>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    animArticle02();
});

function animArticle02() {
    $("#article-02").css('-webkit-animation', 'article2 2s linear');
    var $element = $("#article-02").bind("webkitAnimationEnd", function(){
        this.style.webkitAnimationName = "";
        animArticle03();
    });
}
function animArticle03() {
    $("#article-03").css('-webkit-animation', 'article3 2s linear');
    var $element = $("#article-03").bind("webkitAnimationEnd", function(){
        this.style.webkitAnimationName = "";
        animArticle04();
    });
}
function animArticle04() {
    $("#article-04").css('-webkit-animation', 'article4 2s linear');
    var $element = $("#article-04").bind("webkitAnimationEnd", function(){
        this.style.webkitAnimationName = "";
        animArticle02();
    });
}
</script>
</head>
<body>
<img id="article-02" class="shared" src="article-02.png" alt="" />
<img id="article-03" class="shared" src="article-03.png" alt="" />
<img id="article-04" class="shared" src="article-04.png" alt="" />
</body>
</html>


html，正文{
保证金：0；
}
.共享{
位置：绝对位置；
不透明度：0；
}
img#第02条{
排名：0；
左：0；
宽度：205px；
身高：205px；
}
img#第03条{
顶部：227px；
左：0；
宽度：205px；
身高：205px；
}
img#第04条{
顶部：318px；
左：227px；
宽度：431px；
高度：114px；
}
@-webkit关键帧文章2{
0%{不透明度：0；}
10%{不透明度：1；}
60%{不透明度：1；}
70%{不透明度：0；}
100%{不透明度：0；}
}
@-webkit关键帧第3条{
0%{不透明度：0；}
20%{不透明度：1；}
70%{不透明度：1；}
80%{不透明度：0；}
100%{不透明度：0；}
}
@-webkit关键帧第4条{
0%{不透明度：0；}
30%{不透明度：1；}
80%{不透明度：1；}
90%{不透明度：0；}
100%{不透明度：0；}
}
$（文档）.ready（函数（）{
动画片02（）；
});
函数animaterial02（）{
$（“#article-02”）.css（'-webkit animation'，article2s linear'）；
var$element=$（“#article-02”）.bind（“webkitAnimationEnd”，function（）{
this.style.webkitAnimationName=“”；
动画片03（）；
});
}
函数animaterial03（）{
$（“#article-03”）.css（'-webkit animation'，article3 2s linear'）；
var$element=$（“#article-03”）.bind（“webkitAnimationEnd”，function（））{
this.style.webkitAnimationName=“”；
动画片04（）；
});
}
函数animaterial04（）{
$（“#article-04”）.css（'-webkit animation'，article4 2s linear'）；
var$element=$（“#article-04”）.bind（“webkitAnimationEnd”，function（）{
this.style.webkitAnimationName=“”；
动画片02（）；
});
}

这可能与重复绑定和jQuery调用有关。请尝试以下脚本：

//shorthand .ready()
$(function() {

    //cache elements
    var ar2 = $("#article-02"),
        ar3 = $("#article-03"),
        ar4 = $("#article-04");

    //bind once
    ar2.bind("webkitAnimationEnd", function() {
        this.style.webkitAnimationName = "";
        animArticle03();
    });
    ar3.bind("webkitAnimationEnd", function() {
        this.style.webkitAnimationName = "";
        animArticle04();
    });
    ar4.bind("webkitAnimationEnd", function() {
        this.style.webkitAnimationName = "";
        animArticle02();
    });

    //animate
    function animArticle02() {
        ar2.css('-webkit-animation', 'article2 2s linear');
    }

    function animArticle03() {
        ar3.css('-webkit-animation', 'article3 2s linear');
    }

    function animArticle04() {
        ar4.css('-webkit-animation', 'article4 2s linear');
    }

    animArticle02();
});

动画现在已经运行了10分钟，并且仍然平稳运行，所以这似乎解决了问题。多谢各位！