javascript - (Jquery/Javascript) 事件句柄 - 失去焦点

Question

这是我的问题，我正在开发一个个人网站，该网站在背景中有一个巨大的动画，云朵在无限循环中四处移动。一切都是通过使用 jquery 计时器和 sprite 扩展的 jquery 完成的。|首先它填充云起始位置矩阵(随机)|它设置了每朵云的实际位置。|开始使用 .animate() 函数移动云，并启动计时器再次触发该动画，直到云到达左边界。|永远重复:)

无论如何，这个方法消耗“一点”内存和 CPU，我正在尝试优化代码，我想知道是否有一种方法可以在浏览器切换到不同的页面时调用一个函数，以停止动画。

谢谢。

另外，如果有人能帮助优化代码，我将不胜感激! :)如果有人可以提供帮助，我会发布该网站的链接。再次感谢

Answer 1

首先，确保为单个 DOM 元素设置动画，而不是一堆单独的云。将您的云放入一个容器中并移动后者。

其次，看看CSS3 transitions .它们比基于 JavaScript 的动画更流畅(GPU 加速)。此外， super 容易学习和使用。只需描述一个 CSS 类，并在初始位置设置后将其添加到您的云端。

关于判断浏览器标签是否在后台，requestAnimationFrame , 被 jQuery 用作动画代码，它是一个 60 FPS 代码，可以自动为您完成。

---

看来，jQuery 不再使用 requestAnimationFrame(他们在某个时候 used to，但随后将其删除)。所以，这里是 an animate function使用 requestAnimationFrame(带有用于 IE 的 setTimeout 垫片)你可以从中窃取想法(或者只是获取函数本身)。