window.requestNextAnimationFrame = (function () {
var originalRequestAnimationFrame = undefined,
wrapper = undefined,
callback = undefined,
geckoVersion = null,
userAgent = navigator.userAgent,
index = 0,
self = this; wrapper = function (time) {
time = performance.now();
self.callback(time);
}; /*!
bug!
below code:
when invoke b after 1s, will only invoke b, not invoke a! function a(time){
console.log("a", time);
webkitRequestAnimationFrame(a);
} function b(time){
console.log("b", time);
webkitRequestAnimationFrame(b);
} a(); setTimeout(b, 1000); so use requestAnimationFrame priority!
*/
if(window.requestAnimationFrame) {
return requestAnimationFrame;
} // Workaround for Chrome 10 bug where Chrome
// does not pass the time to the animation function if (window.webkitRequestAnimationFrame) {
// Define the wrapper // Make the switch originalRequestAnimationFrame = window.webkitRequestAnimationFrame; window.webkitRequestAnimationFrame = function (callback, element) {
self.callback = callback; // Browser calls the wrapper and wrapper calls the callback return originalRequestAnimationFrame(wrapper, element);
}
} //修改time参数
if (window.msRequestAnimationFrame) {
originalRequestAnimationFrame = window.msRequestAnimationFrame; window.msRequestAnimationFrame = function (callback) {
self.callback = callback; return originalRequestAnimationFrame(wrapper);
}
} // Workaround for Gecko 2.0, which has a bug in
// mozRequestAnimationFrame() that restricts animations
// to 30-40 fps. if (window.mozRequestAnimationFrame) {
// Check the Gecko version. Gecko is used by browsers
// other than Firefox. Gecko 2.0 corresponds to
// Firefox 4.0. index = userAgent.indexOf('rv:'); if (userAgent.indexOf('Gecko') != -1) {
geckoVersion = userAgent.substr(index + 3, 3); if (geckoVersion === '2.0') {
// Forces the return statement to fall through
// to the setTimeout() function. window.mozRequestAnimationFrame = undefined;
}
}
} return window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame || function (callback, element) {
var start,
finish; window.setTimeout(function () {
start = performance.now();
callback(start);
finish = performance.now(); self.timeout = 1000 / 60 - (finish - start); }, self.timeout);
};
})(); window.cancelNextRequestAnimationFrame = window.cancelRequestAnimationFrame
|| window.webkitCancelAnimationFrame
|| window.webkitCancelRequestAnimationFrame
|| window.mozCancelRequestAnimationFrame
|| window.oCancelRequestAnimationFrame
|| window.msCancelRequestAnimationFrame
|| clearTimeout;

  

requestNextAnimationFrame兼容主浏览器方法的更多相关文章

  1. 【转】HTML5新增元素兼容旧浏览器方法

    ref:http://www.jb51.net/html5/163906.html 问题:如何让IE8-兼容这些标签?(需要设计JS中的DOM) 代码如下: <span style=" ...

  2. H5插入视频兼容主浏览器

    插入视频的方法有很多种,但是有一些方法不兼容. 方法1:DW插入视频利用DW插入的视频为flv格式,操作较简单,但是代码复杂,需要浏览器支持flash插件:火狐浏览器需要手动下载flash插件,比较麻 ...

  3. H5之audio标签放音兼容所有浏览器方法

    前端交流群,群文件提供大量文档.书籍和资料.期待你的加入!群号:127768464 由于项目需要,最近刚做了一个网页放音的功能,使用到了H5新标签<audio></audio> ...

  4. 【转】向HTML中插入视频并兼容所有浏览器的方法

    原文地址:http://www.jb51.net/web/168548.html 向HTML中插入视频有两种方法,一种是古老的object标签,一种是html5中的video标签,前者兼容性相对好些, ...

  5. Css:背景色透明,内容不透明之终极方法!兼容所有浏览器

    转载 http://www.cnblogs.com/jikey/archive/2012/08/31/2665880.html <!DOCTYPE html PUBLIC "-//W3 ...

  6. 关于onscroll函数兼容各浏览器的方法分析

    关于window.onscroll函数兼容各浏览器的方法分析 1.当前文档的渲染模式是决定onscroll函数兼容性根本原因 目前浏览器的排版引擎有三种模式:怪异模式(Quirks mode).接近标 ...

  7. css样式兼容不同浏览器问题解决办法

    在网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV CSS设计的网,就应该更注意IE6 IE7 FF对CSS样式的兼容,不然,你的网乱可能出去不想出现的效果! 所 有浏览器 ...

  8. 【原】CSS实现背景透明,文字不透明,兼容所有浏览器

    11.11是公司成立的日子,16岁啦,我呢3岁半,感谢公司给了这样一个平台,让我得以学习和成长,这里祝愿公司发展越来越好~ 进入主题,每年11月11号是光棍节,产生于校园,本来只是一流传于年轻人的娱乐 ...

  9. CSS实现背景透明,文字不透明,兼容所有浏览器

    11.11是公司成立的日子,16岁啦,我呢3岁半,感谢公司给了这样一个平台,让我得以学习和成长,这里祝愿公司发展越来越好~ 进入主题,每年11月11号是光棍节,产生于校园,本来只是一流传于年轻人的娱乐 ...

随机推荐

  1. go语言学习-接口

    Go语言中虽然没有传统面向对象语言中类.集成的概念,不过提供了接口的支持,可以使用接口来使用一些面向对象的特性. 在 go 语言中,的接口有下面几个特点: 可以包含0个或多个方法的签名 只定义方法的签 ...

  2. 一个垃圾的Android权限框架

    一个垃圾的Android权限框架 学习和参考 简书 https://www.jianshu.com/p/2324a2bdb3d4 写在前头 今天突发奇想想要把Android申请权限的流程封装一下,为使 ...

  3. Alpha冲刺随笔四:第四天

    课程名称:软件工程1916|W(福州大学) 作业要求:项目Alpha冲刺(十天冲刺) 团队名称:葫芦娃队 作业目标:在十天冲刺里对每天的任务进行总结. 随笔汇总:https://www.cnblogs ...

  4. python魔法方法-属性访问控制

    属性访问控制 所谓的属性访问控制就是控制点号访问属性的行为,而且不仅是类的外部,连类的内部也受控制,代码见真章,边看代码边解释: __getattr__(self, item) 定义当访问不存在的属性 ...

  5. 项目冲刺 Seventh

    Seventh Sprint 1.各个成员今日完成的任务 蔡振翼:编写博客 谢孟轩:消息功能的实现,各页面与功能的调试优化 林凯:优化注册判断逻辑,整合相关代码 肖志豪:帮助组员 吴文清:完成管理员信 ...

  6. 图的基本操作(基于邻接矩阵):图的构造,深搜(DFS),广搜(BFS)

    #include <iostream> #include <stdio.h> #include <cstdlib> #include <cstring> ...

  7. 3dmax多个版本软件的安装包以及安装教程

    这个文档具体出自哪里,我也是记不得了,需要的看下,链接如果是失效,那我也无能为力了. 免费分享,链接永久有效 2014版3D MAX链接:http://pan.baidu.com/s/1nuFr7Xv ...

  8. Qt.Qt新安装之后出现Error while building/deploying (kit: Desktop Qt 5.7.0 GCC 64bit) When executing step "Make”

    出问题的环境: 操作系统: Ubuntu18.04 安装包: qt-opensource-linux-x64-5.8.0.run 现象: 新建一个Hello World项目, 试着运行, 出现以下提示 ...

  9. [Beego模型] 二、CRUD 操作

    [Beego模型] 一.ORM 使用方法 [Beego模型] 二.CRUD 操作 [Beego模型] 三.高级查询 [Beego模型] 四.使用SQL语句进行查询 [Beego模型] 五.构造查询 [ ...

  10. zeromq学习笔记1——centos下安装 zeromq-4.1.2

    1.前言 MQ(message queue)是消息队列的简称,可在多个线程.内核和主机盒之间弹性伸缩.ZMQ的明确目标是“成为标准网络协议栈的一部分,之后进入Linux内核”.现在还未看到它们的成功. ...