Grow your CSS skills. Land your dream job.

Some JS Help Please :)?

  • # March 24, 2012 at 1:46 pm

    So I have this script that loads images when they are scrolled to, kind of like uhm… Lazyload or what it’s called.

    The fade in is really slow, any way to change the speed?

    	/*< ![CDATA[*/
    var Imgs=[];

    function ImgLoad(cls){
    var as=zxcByClassName(cls);
    for (var z0=0;z0 if (as[z0].getAttribute('rel')&&as[z0].getElementsByTagName('IMG')[0]){
    oop=new Fade(as[z0].getElementsByTagName('IMG')[0],as[z0].getAttribute('rel'));
    Imgs.push(oop);
    }
    }
    CkTop();
    }

    function Fade(img,src){
    this.img=img;
    this.src=src;
    this.opc=0;
    zxcOpacity(this.img,0);
    }

    Fade.prototype.fade=function(){
    if (this.opc==0) this.img.src=this.src;
    zxcOpacity(this.img,this.opc++);
    var oop=this;
    if (this.opc<101) setTimeout(function(){ oop.fade(); },10);
    }

    function CkTop(){
    for (var z0=0;z0 if (zxcPos(Imgs[z0].img)[1] Imgs[z0].fade();
    Imgs.splice(z0,1);
    z0--;
    }
    }
    }

    function zxcOpacity(obj,opc){
    if (opc<0||opc>100) return;
    obj.style.filter='alpha(opacity='+opc+')';
    obj.style.opacity=obj.style.MozOpacity=obj.style.KhtmlOpacity=opc/100-.001;
    }

    function zxcWWHS(){
    if (window.innerHeight) return [window.innerWidth-10,window.innerHeight-10,window.pageXOffset,window.pageYOffset];
    else if (document.documentElement.clientHeight) return [document.documentElement.clientWidth-10,document.documentElement.clientHeight-10,document.documentElement.scrollLeft,document.documentElement.scrollTop];
    return [document.body.clientWidth,document.body.clientHeight,document.body.scrollLeft,document.body.scrollTop];
    }

    function zxcPos(obj){
    var rtn=[0,0];
    while(obj){
    rtn[0]+=obj.offsetLeft;
    rtn[1]+=obj.offsetTop;
    obj=obj.offsetParent;
    }
    return rtn;
    }


    function zxcByClassName(nme,el,tag){
    if (typeof(el)=='string') el=document.getElementById(el);
    el=el||document;
    for (var tag=tag||'*',reg=new RegExp('\b'+nme+'\b'),els=el.getElementsByTagName(tag),ary=[],z0=0; z0 if(reg.test(els[z0].className)) ary.push(els[z0]);
    }
    return ary;
    }

    window.onscroll=CkTop;
    /*]]>*/
    # March 24, 2012 at 4:14 pm

    Try this… look for this function and change the 0.001 to 0.1as I’ve done below:

    	function zxcOpacity(obj,opc){
    if (opc<0||opc>100) return;
    obj.style.filter='alpha(opacity='+opc+')';
    obj.style.opacity=obj.style.MozOpacity=obj.style.KhtmlOpacity=opc/100-.1;
    }

    then adjust the timing using the setTimeout time in milliseconds, as needed

    	Fade.prototype.fade=function(){
    if (this.opc==0) this.img.src=this.src;
    zxcOpacity(this.img,this.opc++);
    var oop=this;

    /* increase the 10 (time in milliseconds) to slow down the fade effect */
    if (this.opc<101) setTimeout(function(){ oop.fade(); }, 10);

    }
Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".