写了一个js,利用setInterval将几副图片淡入淡出,在台式机和android设备上好好的,在IOS
系统中整个网页都不能正常运作.输入框几乎要等几分钟才能输入一个字符.
开始用的是iphone5s,ipadmini2,以为是设备问题,换iphone6+一样?
为毛哇?写了一个js,利用setInterval将几副图片淡入淡出,在台式机和android设备上好好的,在IOS
系统中整个网页都不能正常运作.输入框几乎要等几分钟才能输入一个字符.
开始用的是iphone5s,ipadmini2,以为是设备问题,换iphone6+一样?
为毛哇?
var MyInterval=setInterval("showhp()",100);
....
function showhp(){
(FadeOut)?aopa=aopa-0.05:aopa=aopa+0.05;
if (aopa<=0||aopa>=1){
FadeOut=!FadeOut;
(FadeOut)?aopa=aopa-0.05:aopa=aopa+0.05;
bid=bid+1;
if( bid>3){bid=1};
document.getElementById("hbr1").src="./pics/homebanr"+bid+".jpg"
isg+=1;
isg==3?isg=0:isg=isg;
document.getElementById("hbrtxttxt").innerHTML=slogan[isg];
};
document.getElementById("hbr1").style.opacity=aopa;}
以为是时间间隔设成100ms太大,改成1000ms一样.
只看了第一行 var MyInterval=setInterval("showhp()",100); 就觉得这个脚本如果正常执行起来到是挺奇怪的。setInterval的第一个参数是一个函数回调,其实就是个指针。你现在传给他一个函数操作的返回值,而且还是null,你让它该怎么操作咧?它只能运行一下你的函数,然后默默的混吃等死。然后每秒要运行十次null函数,这不把浏览器弄得死去活来的么~还有,楼主这么写淡入淡出我还真不知道效果怎么样。楼主学的别太着急了,一步一步来比较好。
你用Safari这个地址http://www.apple.com/cn/safari/ 试试,ios估计也是这个浏览器.
我不知道问题实际需要的操作是怎么样的,就随手写了一个淡入淡出分离的函数。不知道能不能帮上忙,还有我个人觉得动画效果与更换图片的操作一定要分离开来,不然代码的维护性应该会比较差。
<img src="medium.jpg" id="testImg" alt="Test Image">
<button id="toggleBtn">FadeOut/FadeIn</button>
<script>
window.onload = function(){
document.getElementById("toggleBtn").onclick = function(){
var img = document.getElementById("testImg");
fadeToggle(img, 1200);
}
function fadeToggle(img, during){
var opacity = img.style.opacity;
if ( opacity != 0 && opacity != 1) return;
var isFadeIn = (opacity == 0);
var totalFrame = 60 * during / 1000;
var stepLength = 1 / totalFrame;
var currentFrame = 0;
function fadeToggleImplement(){
img.style.opacity = (isFadeIn) ? stepLength * currentFrame : stepLength * (totalFrame - currentFrame);
//console.log(img.style.opacity);
currentFrame++;
if (currentFrame <= totalFrame)
handle = setTimeout(fadeToggleImplement, 1000 / 60);
}
fadeToggleImplement();
}
}
</script>
It works! 但还是不明白我的那个为何不行?
首先 要证明一下
是这个代码影响了 系统性能吗?
如果是的话
最最影响性能的 就是
document.getElementById("hbr1").src="./pics/homebanr"+bid+".jpg" 这里
要替换代码测试证明
你也可以 在输入框获的焦点的时候 停止这个代码