requestNextAnimationFrame兼容主浏览器方法
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兼容主浏览器方法的更多相关文章
- 【转】HTML5新增元素兼容旧浏览器方法
ref:http://www.jb51.net/html5/163906.html 问题:如何让IE8-兼容这些标签?(需要设计JS中的DOM) 代码如下: <span style=" ...
- H5插入视频兼容主浏览器
插入视频的方法有很多种,但是有一些方法不兼容. 方法1:DW插入视频利用DW插入的视频为flv格式,操作较简单,但是代码复杂,需要浏览器支持flash插件:火狐浏览器需要手动下载flash插件,比较麻 ...
- H5之audio标签放音兼容所有浏览器方法
前端交流群,群文件提供大量文档.书籍和资料.期待你的加入!群号:127768464 由于项目需要,最近刚做了一个网页放音的功能,使用到了H5新标签<audio></audio> ...
- 【转】向HTML中插入视频并兼容所有浏览器的方法
原文地址:http://www.jb51.net/web/168548.html 向HTML中插入视频有两种方法,一种是古老的object标签,一种是html5中的video标签,前者兼容性相对好些, ...
- Css:背景色透明,内容不透明之终极方法!兼容所有浏览器
转载 http://www.cnblogs.com/jikey/archive/2012/08/31/2665880.html <!DOCTYPE html PUBLIC "-//W3 ...
- 关于onscroll函数兼容各浏览器的方法分析
关于window.onscroll函数兼容各浏览器的方法分析 1.当前文档的渲染模式是决定onscroll函数兼容性根本原因 目前浏览器的排版引擎有三种模式:怪异模式(Quirks mode).接近标 ...
- css样式兼容不同浏览器问题解决办法
在网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV CSS设计的网,就应该更注意IE6 IE7 FF对CSS样式的兼容,不然,你的网乱可能出去不想出现的效果! 所 有浏览器 ...
- 【原】CSS实现背景透明,文字不透明,兼容所有浏览器
11.11是公司成立的日子,16岁啦,我呢3岁半,感谢公司给了这样一个平台,让我得以学习和成长,这里祝愿公司发展越来越好~ 进入主题,每年11月11号是光棍节,产生于校园,本来只是一流传于年轻人的娱乐 ...
- CSS实现背景透明,文字不透明,兼容所有浏览器
11.11是公司成立的日子,16岁啦,我呢3岁半,感谢公司给了这样一个平台,让我得以学习和成长,这里祝愿公司发展越来越好~ 进入主题,每年11月11号是光棍节,产生于校园,本来只是一流传于年轻人的娱乐 ...
随机推荐
- 程序员之路:python3+PyQt5+pycharm桌面GUI开发(转)
程序员之路:python3+PyQt5+pycharm桌面GUI开发 http://blog.sina.com.cn/s/blog_989218ad0102wz1k.html 先看效果: 图 1 没错 ...
- MySQL基础之数据类型和运算符
早些年学习MySQL的笔记,发在博客园上,以便后续回顾学习: 1. 数据类型为int(11),注意到后面的数字11,这表示的是该数据类型指定的显示宽度,指定能够显示的数值中数字的个数.其他数据类型也可 ...
- codeforces-1102e
https://www.cnblogs.com/31415926535x/p/10439313.html 这道题很锻炼思维,,是到好题,,就是我不在状态,,没看出来线段间的关系,,学会了求一个区间里相 ...
- IdentityServer4-参考
一.Identity Resource 二.API Resource 三.Client 四.GrantValidationResult 五.Profile Service 六.IdentityServ ...
- manjaro 配置 独立显卡驱动
参考 https://blog.csdn.net/weixin_42205310/article/details/81905293 尝试多次 只有这篇配置成功. ①先解决依赖sudo pacman - ...
- Chrome 浏览器的Secure Shell插件
说起putty,windows下面的程序猿个个都是爱恨交加. 不小心发现一个宝贝,Chrome 浏览器的Secure Shell插件. 这是Google官方推出的插件,试用下来,putty完全可以下岗 ...
- C#中如何把int转换成两个字符的string
部门新开了项目,所以一整周的时间都在瞎忙,为什么称瞎忙?所负责的内容,并没有做好,也是一万个心塞啊.... 说一下最近碰到的一些问题. 用到了计时,但是比如定时是一分半钟,可是显示的时候,想让显示为1 ...
- python 安装pip setuptools
注意操作前提一定要使用管理员方式运行 python目录要完全允许控制 windows7 下 0.先安装python2.7.13 32位:https://www.python.org/ftp/pytho ...
- 关于iphone6/5/4s 在iOS8.0系统下 仅仅读@3x图片
做iphone6和plus适配时候发现一个问题,先来看图(一下讨论所有在真机下完毕,非模拟器) 128*750图片是 nav@2x.png watermark/2/text/aHR0cDovL2Js ...
- Asp.Net Core 通过自定义中间件防止图片盗链的实例(转)
一.原理 要实现防盗链,我们就必须先理解盗链的实现原理,提到防盗链的实现原理就不得不从HTTP协议说起,在HTTP协议中,有一个表头字段叫referer,采用URL的格式来表示从哪儿链接到当前的网页或 ...