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. ubuntu18.04 lts重装VMware Tools实现主机文件共享等功能

    ubuntu18.04 lts重装VMware Tools实现主机文件共享等功能 在VMWare 14.x上安装ubunuu18.04 lts后发现,可以实现全屏显示,但是没有与主机共享文件的功能,然 ...

  2. 深入理解 Array.prototype.map()

    深入理解 Array.prototype.map() map() 方法创建一个新数组,其结果是该数组中的每个元素都调用一个提供的函数后返回的结果. 语法 let new_array = arr.map ...

  3. BZOJ.4753.[JSOI2016]最佳团体(01分数规划 树形背包DP)

    题目链接 \(Description\) 每个点有费用si与价值pi,要求选一些带根的连通块,总大小为k,使得 \(\frac{∑pi}{∑si}\) 最大 \(Solution\) 01分数规划,然 ...

  4. HDU.3516.Tree Construction(DP 四边形不等式)

    题目链接 贴个教程: 四边形不等式学习笔记 \(Description\) 给出平面上的\(n\)个点,满足\(X_i\)严格单增,\(Y_i\)严格单减.以\(x\)轴和\(y\)轴正方向作边,使这 ...

  5. 51Nod.1244.莫比乌斯函数之和(杜教筛)

    题目链接 map: //杜教筛 #include<map> #include<cstdio> typedef long long LL; const int N=5e6; in ...

  6. 潭州课堂25班:Ph201805201 WEB 之 JS 第六课 (课堂笔记)

    上节补充方法 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  7. 我的 Sublime Text 2 笔记

    作为aptana死忠粉的我,最近由于工作需要最近开始使用sublime,初次使用,就被其秒开的启动速度,简洁的界面设计,无干扰的信息提示所这幅. 俗话说,工欲善其事必先利其器,作为码农,在开始编码之前 ...

  8. Android MediaPlayer架构 -- MediaPlayer的创建过程

    本文系作者自己学习之所用,文章内容仅出自作者拙劣之思考,问题之处烦请不吝指教. MediaPlayer 能被用来控制音/视频文件或流媒体的回放.Android中以MediaPlayer类作为音视频播放 ...

  9. javascript中用正则表达式判断是否为汉字及常用的判断

    a.判断是否为汉字: 1.汉字为任意长度时: var han = /^[\u4e00-\u9fa5]+$/; 例如: var han = /^[\u4e00-\u9fa5]+$/; var vals= ...

  10. python开发线程:线程&守护线程&全局解释器锁

    一 threading模块介绍 multiprocess模块的完全模仿了threading模块的接口,二者在使用层面,有很大的相似性,因而不再详细介绍 官网链接:https://docs.python ...