JavaScript + CSS3 動畫的內存問題。怎么提高？

Question

我創建了一個動畫循環。 一旦一個動畫完成，它就會觸發下一個動畫，依此類推。 似乎當我保持瀏覽器打開 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>

Answer 1

它可能與重復綁定和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();
});

Answer 2

"transition" 和 "-webkit-keyframes" 都會導致 Chrome 上的內存泄漏。

JavaScript + CSS3 動畫的內存問題。怎么提高？

問題描述

2 個解決方案

解決方案1
2 已采納 2012-05-23 10:36:15

解決方案2
0 2022-01-17 20:58:01

JavaScript + CSS3 動畫的內存問題。 怎么提高？

問題描述

2 個解決方案

解決方案1 2 已采納 2012-05-23 10:36:15

解決方案2 0 2022-01-17 20:58:01

JavaScript + CSS3 動畫的內存問題。怎么提高？

解決方案1
2 已采納 2012-05-23 10:36:15

解決方案2
0 2022-01-17 20:58:01