requestAnimationFrame兼容性扩展

/**
     * requestAnimationFrame兼容性扩展,两方面工作:
     * 1、把各浏览器前缀进行统一
     * 2、在浏览器没有requestAnimationFrame方法时将其指向setTimeout方法
     * */
    (function() {
        var lastTime = 0;
        var vendors = ["webkit", "moz"];
        for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
            window.requestAnimationFrame = window[vendors[x] + "RequestAnimationFrame"];
            // Webkit中此取消方法的名字变了
            window.cancelAnimationFrame = window[vendors[x] + "CancelAnimationFrame"] || window[vendors[x] + "CancelRequestAnimationFrame"];
        }
        if (!window.requestAnimationFrame) {
            window.requestAnimationFrame = function(callback, element) {
                var currTime = new Date().getTime();
                var timeToCall = Math.max(0, 16.7 - (currTime - lastTime));
                var id = window.setTimeout(function() {
                    callback(currTime + timeToCall);
                }, timeToCall);
                lastTime = currTime + timeToCall;
                return id;
            };
        }
        if (!window.cancelAnimationFrame) {
            window.cancelAnimationFrame = function(id) {
                clearTimeout(id);
            };
        }
    }());
时间: 2024-12-24 19:43:47

requestAnimationFrame兼容性扩展的相关文章

window.requestAnimationFrame 兼容性封装,调节重新渲染,提高网页性能

// http://paulirish.com/2011/requestanimationframe-for-smart-animating/ // http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating // requestAnimationFrame polyfill by Erik M?ller. fixes from Paul Irish and Tino Zijde

requestAnimationFrame兼容性写法

(function() { var lastTime = 0; var vendors = ['webkit', 'moz']; for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) { window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame']; window.cancelAnimationFrame =

遇到的几个浏览器兼容性问题

背景解决浏览器的兼容性问题是一件很烦的事情,其中并没有太多高深的技巧,但是开发需要,也不得不去解决它,最近在开发项目中也遇到一些兼容性的问题,希望把这些问题的解决方式记录下来,下次遇到就直接拿过来用,也希望对他人有一些帮助. 兼容性问题及解决方式 1.object-fit在ie11和edge中不兼容,可以一些css hacks使用background-size和background-position替换object-fit设置图片的样式 <img class="loadingImage&q

HTML5中类jQuery选择器querySelector的高级使用

基本用法 querySelector 该方法返回满足条件的单个元素.按照深度优先和先序遍历的原则使用参数提供的CSS选择器在DOM进行查找,返回第一个满足条件的元素. ----> querySelector得到一个DOM var element = document.querySelector('#container');//返回id为container的dom var element = document.querySelector('div#container');//返回id为contai

ES5新特性:理解 Array 中增强的 9 个 API

为了更方便的对JS中Array进行操作,ES5规范在Array的原型上新增了9个方法,分别是forEach.filter.map.reduce.reduceRight.some.every.indexOf 和 lastIndexOf,本文将对这几个方法进行详细的讲解,并对每一个方法进行原型扩展,以兼容不支持ES5的浏览器. forEach(callback[,thisArg]) 在ES5之前,我们可以通过for和for in 两种方式来遍历数组,而ES5引入了一个新方法forEach,使数组遍历

(转)视频编码标准汇总及比较

MPEG-1 类型:Audio&Video 制定者:MPEG(Moving Picture Expert Group) 所需频宽:2Mbps 特性:对动作不激烈的视频信号可获得较好的图像质量,但当动作激烈时,图像就会产生马赛克现象.它没有定义用于额外数据流进行编对码的格式,因此这种技术不能广泛推广.它主要用于家用VCD,它需要的存储空间比较大. 优点:对动作不激烈的视频信号可获得较好的图像质量. 缺点:当动作激烈时,图像就会产生马赛克现象.它没有定义用于额外数据流进行编对码的格式,因此这种技术不

读书笔记 effective c++ Item 54 让你自己熟悉包括TR1在内的标准库

1. C++0x的历史渊源 C++标准——也就是定义语言的文档和程序库——在1998被批准.在2003年,一个小的“修复bug”版本被发布.然而标准委员会仍然在继续他们的工作,一个“2.0版本”的C++标准预计在2009年被发布(虽然所有的工作很有可能在2007年底被完成).直到现在,发布下一版C++的预计年份还没有被确定,这就解释了为什么人们把下一版C++叫做“C++0x”——C++的200x年版本. C++0x可能会包含一些有趣的新的语言特性,但是大多数新C++功能将会以标准库附加物的形式被

sql中select语句详解及用途

SELECT [ ALL | DISTINCT [ ON ( expression [, ...] ) ] ] * | expression [ AS output_name ] [, ...] [ FROM from_item [, ...] ] [ WHERE condition ] [ GROUP BY expression [, ...] ] [ HAVING condition [, ...] ] [ { UNION | INTERSECT | EXCEPT } [ ALL ] sel

动画优化、客户端存储、历史记录、worker

一.requestAnimationFrame 1.requestAnimationFrame怎么用? 设置关键帧动画效果,注重关键帧执行的情况,用法与setTimeout一样 2.requestAnimationFrame与setTimeout的区别?  (执行时间,setTimeout是用户设置的时间 ,requestAnimationFrame看起来实现动画效果更流畅) <style> .demo{ width:100px; height:100px; background:red; p