javascript - JavaScript + CSS3 动画的内存问题。如何提高？-6ren

javascript - JavaScript + CSS3 动画的内存问题。如何提高？

转载作者：行者123 更新时间：2023-12-02 19:38:04

24

4

我创建了一个动画循环。一旦一个动画完成，它就会触发下一个动画，依此类推。似乎当我保持浏览器打开 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>

最佳答案

这可能与重复绑定(bind)和 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();
});

关于javascript - JavaScript + CSS3 动画的内存问题。如何提高？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10718091/

24

4

0

文章推荐： javascript - 实现jquery动画之前的短暂暂停

文章推荐： r - 使用Selenium和docker工具箱下载文件

文章推荐： javascript - 使用子级创建 json 树结构

Java 内存/gc 问题(JRE 内存、堆空间不足和 gc 已满)
我在具有 2CPU 和 3.75GB 内存 (https://aws.amazon.com/ec2/instance-types/) 的 c3.large Amazon EC2 ubuntu 机器上运
linux-kernel - 如何在 Linux 中写入 VGA 内存(不是视频缓冲区，内存)以在屏幕上显示 Logo ？
我想通过用户空间中的mmap-ing并将地址发送到内核空间从用户空间写入VGA内存(视频内存，而不是缓冲区)，我将使用pfn remap将这些mmap-ed地址映射到vga内存(我将通过 lspci
Julia 内存
在 Mathematica 中，如果你想让一个函数记住它的值，它在语法上是很轻松的。例如，这是标准示例 - 斐波那契: fib[1] = 1 fib[2] = 1 fib[n_]:= fib[n] =
在编译时分配的c++内存
我读到动态内存是在运行时在堆上分配的，而静态内存是在编译时在堆栈上分配的，因为编译器知道在编译时必须分配多少内存。考虑以下代码: int n; cin>>n; int a[n]; 如果仅在运行期间读
Python 在内存中保存数据？ (内存)
我是 Python 的新手，但我之前还不知道这一点。我在 for 循环中有一个基本程序，它从站点请求数据并将其保存到文本文件但是当我检查我的任务管理器时，我发现内存使用量只增加了？长时间运行时，这对我
用于查找表的 CUDA 内存
我正在设计一组数学函数并在 CPU 和 GPU(使用 CUDA)版本中实现它们。其中一些函数基于查找表。大多数表占用 4KB，其中一些占用更多。基于查找表的函数接受一个输入，选择查找表的一两个条目，
无法访问第一个地址以外的 malloc 内存
读入一个文件，内存被动态分配给一个字符串，文件内容将被放置在这里。这是在函数内部完成的，字符串作为 char **str 传递。使用 gdb 我发现在行 **(str+i) = fgetc(aFil
JSP session 内存？
我需要证实一个理论。我正在学习 JSP/Java。在查看了一个现有的应用程序(我没有写)之后，我注意到一些我认为导致我们的性能问题的东西。或者至少是其中的一部分。它是这样工作的: 1)用户打开搜索
R:环境的缓存/内存
n我想使用memoization缓存某些昂贵操作的结果，这样就不会一遍又一遍地计算它们。两个memoise和 R.cache适合我的需要。但是，我发现缓存在调用之间并不可靠。这是一个演示我看到的问
javascript - 为什么给变量赋值给自己内存=内存？
我目前正在分析一些 javascript shell 代码。这是该脚本中的一行: function having() { memory = memory; setTimeout("F0
elasticsearch - 内存 Elasticsearch
我有一种情况，我想一次查询数据库，然后再将整个数据缓存在内存中。我得到了内存中 Elasticsearch 的建议，我用谷歌搜索了它是什么，以及如何在自己的 spring boot 应用程序中实现它
Haskell、内存、堆栈溢出
我正在研究 Project Euler (http://projecteuler.net/problem=14) 的第 14 题。我正在尝试使用内存功能，以便将给定数字的序列长度保存为部分结果。我正在
java - 内存/注意力游戏问题
所以，我一直在做 Java 内存/注意力游戏作业。我还没有达到我想要的程度，它只完成了一半，但我确实让 GUI 大部分工作了......直到我尝试向我的框架添加单选按钮。我认为问题可能是因为我将 JF
Flask/Jinja 内存
我一直在尝试使用 Flask-Cache 的 memoize 功能来仅返回 statusTS() 的缓存结果，除非在另一个请求中满足特定条件，然后删除缓存。但它并没有被删除，并且 Jinja 模板仍
php - =& 运算符，内存
我对如何使用 & 运算符来减少内存感到非常困惑。我可以回答下面的问题吗？ clase C{ function B(&$a){ $this->a = &$a; $thi
java - 字符串性能-内存
在编写代码时，我遇到了一个有趣的问题。我有一个 PersonPOJO，其 name 作为其 String 成员之一及其 getter 和 setter class PersonPOJO { priv
java - java中这两个构造函数有什么区别？ (内存)
在此代码中 public class Base { int length, breadth, height; Base(int l, int b, int h) { l
c - 内存 - 自然地址边界
Definition Structure padding is the process of aligning data members of the structure in accordance
没有闭包作用域的 Javascript 内存
在 JavaScript Ninja 的 secret 中，作者提出了以下方案，用于在没有闭包的情况下内存函数结果。他们通过利用函数是对象这一事实并在函数上定义一个属性来存储过去调用函数的结果来实现这
使用的 Java 内存
我正在尝试找出 map 消耗的 RAM 量。所以，我做了以下事情；- Map cr = crPair.collectAsMap(); // 200+ entries System.out.printl

首页

博学

6Ren·AI

商城

javascript - JavaScript + CSS3 动画的内存问题。如何提高？