div层的移动及性能优化
2010-11-16 14:14
120 查看
层的移动本来很简单,用jquery插件或者自己写一个也不难,但是最近一个ipad项目里,发现用手移动div会感觉很卡,体验很差(可能是ipad的配置根不上pc)。同样如果一个页面结构很复杂或者电脑配置不好的话也会出现这种情况。为了弄清变慢的原因,我们做了几个demo对比,最后发现在mousemove事件上加上定时器能改进这个体验。
整个代码的关键地方在于当鼠标按下时开始了的计时器,这样Onmousemove事件会每隔30ms执行一次,然后在鼠标松下的时候清除计时器。
timer=setInterval(function(){flag=true;},30);
这样可以减轻浏览器绘制div层的负担,不至于拖动时每时每刻都在移动,其实太短了人眼也感觉不到变化,延迟间隔可以自己根据体验设置。
代码
function Endrag(source,target){
source=typeof(source)=="object" ? source:document.getElementById(source);
target=typeof(target)=="object" ? target:document.getElementById(target);
var x0=0,y0=0,x1=0,y1=0,moveable=false,index=100;
var timer,flag=false;
var i=0;
source.onmousedown=function(e){
e = e ? e : (window.event ? window.event : null);
x0 = e.clientX ;
y0 = e.clientY ;
x1 = isNaN(parseInt(source.style.left))?0:parseInt(source.style.left);
y1 = isNaN(parseInt(source.style.top))?0:parseInt(source.style.top);
moveable = true;
//当鼠标按下时,定时器开始工作,每隔50ms执行一次mousemove事件
timer=setInterval(function(){flag=true;},30);
};
//拖动;
source.onmousemove=function(e){
e = e ? e : (window.event ? window.event : null);
if(moveable){
if(flag){
i++;
flag=false;
target.style.left = (e.clientX + x1 - x0 ) + "px";
target.style.top = (e.clientY + y1 - y0 ) + "px";
}
}
};
//停止拖动;
source.onmouseup=function (e){
if(moveable) {
moveable = false;
clearInterval(timer);
//alert(i);
}
};
//停止拖动;
source.onmouseout=function (e){
if(moveable) {
moveable = false;
clearInterval(timer);
//alert(i);
}
};
}
整个代码的关键地方在于当鼠标按下时开始了的计时器,这样Onmousemove事件会每隔30ms执行一次,然后在鼠标松下的时候清除计时器。
timer=setInterval(function(){flag=true;},30);
这样可以减轻浏览器绘制div层的负担,不至于拖动时每时每刻都在移动,其实太短了人眼也感觉不到变化,延迟间隔可以自己根据体验设置。
代码
function Endrag(source,target){
source=typeof(source)=="object" ? source:document.getElementById(source);
target=typeof(target)=="object" ? target:document.getElementById(target);
var x0=0,y0=0,x1=0,y1=0,moveable=false,index=100;
var timer,flag=false;
var i=0;
source.onmousedown=function(e){
e = e ? e : (window.event ? window.event : null);
x0 = e.clientX ;
y0 = e.clientY ;
x1 = isNaN(parseInt(source.style.left))?0:parseInt(source.style.left);
y1 = isNaN(parseInt(source.style.top))?0:parseInt(source.style.top);
moveable = true;
//当鼠标按下时,定时器开始工作,每隔50ms执行一次mousemove事件
timer=setInterval(function(){flag=true;},30);
};
//拖动;
source.onmousemove=function(e){
e = e ? e : (window.event ? window.event : null);
if(moveable){
if(flag){
i++;
flag=false;
target.style.left = (e.clientX + x1 - x0 ) + "px";
target.style.top = (e.clientY + y1 - y0 ) + "px";
}
}
};
//停止拖动;
source.onmouseup=function (e){
if(moveable) {
moveable = false;
clearInterval(timer);
//alert(i);
}
};
//停止拖动;
source.onmouseout=function (e){
if(moveable) {
moveable = false;
clearInterval(timer);
//alert(i);
}
};
}
相关文章推荐
- div层的移动及性能优化
- 移动性能的优化规则
- 腾讯移动性能评测专家叶方正:Android优化笔记
- 移动前端系列——移动页面性能优化(转)
- 【C++11右值引用与移动语义】——避免深拷贝,优化性能 (附:codeblocks中编译器返回值优化关闭方法)
- Unity教程之-unity3d移动平台性能优化专题(三):减少面数
- 数据库移动、性能优化、备份和镜像
- 移动网站性能优化:网页加载技术概览
- 移动平台Unity3D 应用性能优化
- 移动开发Html 5前端性能优化指南
- 【移动开发者沙龙 北京站】第一期 移动应用性能优化笔记 火热报名中
- 移动HTML5前端性能优化指南
- 移动WEB 性能优化方案
- 腾讯移动性能评测专家叶方正:Android优化笔记
- 移动HTML5前端性能优化指南(转)
- 移动网站性能优化
- 移动站点性能优化
- unity3d移动平台性能优化(5):音频优化
- unity3d移动平台性能优化专题(6):动画优化