22-07-2009, 02:02
|
|
|
|
חבר מתאריך: 02.10.05
הודעות: 2,355
|
|
[JS] הדפדפן Internet Explorer טוחן את המעבד
הכנתי קוד בשביל גלריית תמונות ומעבר בין תמונה לתמונה ב- Fade.
הקוד בנוי משתי מחלקות:
fader.js
קוד:
// Fade class created by Nadav Tenenbaum
// you may use this class, with credit only
var fader = function(obj)
{
this.obj = obj;
this.counter = 0;
this.sine = true;
this.handler = '';
this.speed = 0;
this.setOpacity = function(amount)
{
this.obj.style.filter = "alpha(opacity="+amount+")";
this.obj.style.opacity = (amount / 100);
this.obj.style.MozOpacity = (amount / 100);
this.obj.style.KhtmlOpacity = (amount / 100);
}
this.returnOpacity = function(num, scale)
{
num = (num / scale) * 100;
if(!this.sine)
return (num / scale) * 100;
return Math.sin( (Math.PI/2) * num/scale ) * scale;
}
this.fadeIn = function(scale, onComplete)
{
this.setOpacity(this.returnOpacity(this.counter, scale));
if(this.counter == scale + 1)
{
this.setOpacity(100);
window.clearInterval(this.handler);
if(onComplete != undefined)
onComplete();
}
this.counter++;
}
this.fadeOut = function(scale, onComplete)
{
this.setOpacity(this.returnOpacity(this.counter, scale));
if(this.counter == 0)
{
this.setOpacity(0);
window.clearInterval(this.handler);
if(onComplete != undefined)
onComplete();
}
this.counter--;
}
this.initIn = function(sine, speed, onComplete)
{
window.clearInterval(this.handler);
this.sine = sine;
this.counter = 0;
this.setOpacity(0);
this.speed = speed;
thisFader = this;
onCompleteFunc = onComplete;
this.handler=window.setInterval("thisFader.fadeIn(thisFader.speed, onCompleteFunc);", 2);
}
this.initOut = function(sine, speed, onComplete)
{
window.clearInterval(this.handler);
this.sine = sine;
this.counter = speed;
this.setOpacity(100);
this.speed = speed;
thisFader = this;
onCompleteFunc = onComplete;
this.handler=window.setInterval("thisFader.fadeOut(thisFader.speed, onCompleteFunc);", 2);
}
}
ו- slideShow.js
קוד:
// Fade class created by Nadav Tenenbaum
// you may use this class, with credit only
// this class relies on another class made by Nadav Tenenbaum, fade.js
var slideShow = function(obj, width, height, speed, hold, sine) {
this.obj = obj;
this.width = width;
this.height = height;
this.images = new Array();
this.count = 0;
this.addCount = 0;
this.speed = speed;
this.hold = hold;
this.sine = sine;
this.addImage = function(src) {
this.images[this.addCount] = src;
this.addCount++;
}
this.flipImage = function() {
window.setTimeout("thisSlideShow.imgFade.initOut(thisSlideShow.sine, thisSlideShow.speed, function() {thisSlideShow.imageIn();})", this.hold);
this.count++;
}
this.imageIn = function() {
thisSlideShow = this;
if(this.images[this.count] == undefined)
this.count = 0;
this.imgObj.src = this.images[this.count];
this.imgFade.initIn(thisSlideShow.sine, thisSlideShow.speed, function() {thisSlideShow.flipImage();});
}
this.init = function() {
// First flip
this.imgObj = document.createElement('img');
this.imgFade = new fader(this.imgObj);
this.imgFade.setOpacity(0);
this.obj.appendChild(this.imgObj);
// Other flips
this.imageIn();
}
}
בפיירפוקס עובד מאוד יפה.
Internet Explorer מציג את זה קצת מקוטע וטוחן את המעבד על 27% (מעבד מרובע ליבות)
חשבתי שזה בגלל שהיו הרבה תמונות png אבל ניסיתי גם בלי זה, עבד יותר טובה אבל עדיין טוחן את המעבד.
מה שמוזר זה שאם אני בודק את הדפים דרך IE Tester אז נמצא על 14% וגם זה, רק עם Internet Explorer 8, דווקא 7 ו-6 על 0-5 אחוז.
הקוד שקורא לגלרייה:
קוד:
var slide = new slideShow($('imageSlideShow'), 152, 98, 500, 4000, true);
slide.addImage('slideshow/slide1.gif');
slide.init();
יש רעיון איך להפחית את צריכת המשאבים?
_____________________________________
|