Page 2 of 3 FirstFirst 123 LastLast
Results 11 to 20 of 21

Thread: Looking for a script... images don't load until you scroll to them

  1. #11
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default

    this modification will ensure the image is loaded from the server

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <script type="text/javascript">
    /*<![CDATA[*/
    var Imgs=[];
    
    function ImgLoad(cls){
     var as=zxcByClassName(cls);
     for (var z0=0;z0<as.length;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+'?'+new Date().getTime();
     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<Imgs.length;z0++){
      if (zxcPos(Imgs[z0].img)[1]<zxcWWHS()[1]+zxcWWHS()[3]&&Imgs[z0].opc==0){
       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<els.length;z0++){
      if(reg.test(els[z0].className)) ary.push(els[z0]);
     }
     return ary;
    }
    
    window.onscroll=CkTop;
    /*]]>*/
    </script>
    
    </head>
    
    <body onload="ImgLoad('img')">
    <a class="img" rel="http://www.vicsjavascripts.org.uk/StdImages/Two.gif"><img src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" width="50" height="50" /></a>
    <div style="height:800px;"></div>
    <a class="img" rel="http://www.vicsjavascripts.org.uk/StdImages/Three.gif"><img src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" width="50" height="50" /></a>
    
    </body>
    </html>
    but best post a link to the problem page
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  2. The Following 2 Users Say Thank You to vwphillips For This Useful Post:

    fonzzie (11-08-2010),gbrown88 (11-09-2010)

  3. #12
    Join Date
    Nov 2010
    Posts
    6
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    Could it be that IE is just handling javascript to slow to lazyload multiple images?

    I played around a bit withe "opc++" and "opc+=20" which improved the fadingtime, altough not smoothly of course.

    In other words...hoping IE 9 will live up to it's promise regarding javascript speed improvement
    Last edited by fonzzie; 11-08-2010 at 11:09 PM.

  4. #13
    Join Date
    Nov 2010
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    Hey,

    Here is the link to the page I am having problems with:

    http://nfl.rantsports.com/home-test/

    The password is:



    Everything appears to be working fine, but you'll see after the images pop in, they then disappear.

    Thanks,
    Grant
    Last edited by gbrown88; 11-09-2010 at 10:37 PM.

  5. #14
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default

    the script requires that the rel attribute of the link defines the new image src

    your page does not do this.
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  6. The Following User Says Thank You to vwphillips For This Useful Post:

    gbrown88 (11-09-2010)

  7. #15
    Join Date
    Nov 2010
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    Thanks a ton! Got it working on our NFL homepage now:

    nfl.rantsports.com

  8. #16
    Join Date
    Nov 2010
    Posts
    6
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    gbrown88 has the same problem in IE

    The fade is just too slow

    Now, what I found out...the clean script works fine on IE

    But when it is implemented in somewhat larger html pages, the slowdown happens

  9. #17
    Join Date
    Apr 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Anyway to get this to work for a Horizontal loading webpage (I'm using a single row table to accomplish this).

    I'm presuming is has something to do in the

    PHP Code:
    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;

    area....but I cannot get it to work for some reason. Thanks so much!

  10. #18
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default

    post a link to your page
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  11. #19
    Join Date
    May 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by vwphillips View Post
    post a link to your page

    Hi,

    I am using the script but the images load very slow (4-5seconds fade).

    I am a newbie and can not figure out the code. Would it be possible to determine the fading or easing with this code?


    Thank you

  12. #20
    Join Date
    May 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    This code was useful to me too

    Quote Originally Posted by vwphillips View Post
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <script type="text/javascript">
    /*<![CDATA[*/
    var Imgs=[];
    
    function ImgLoad(cls){
     var as=zxcByClassName(cls);
     for (var z0=0;z0<as.length;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<Imgs.length;z0++){
      if (zxcPos(Imgs[z0].img)[1]<zxcWWHS()[1]+zxcWWHS()[3]&&Imgs[z0].opc==0){
       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<els.length;z0++){
      if(reg.test(els[z0].className)) ary.push(els[z0]);
     }
     return ary;
    }
    
    window.onscroll=CkTop;
    /*]]>*/
    </script>
    
    </head>
    
    <body onload="ImgLoad('img')">
    <a class="img" rel="http://www.vicsjavascripts.org.uk/StdImages/Two.gif"><img src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" width="50" height="50" /></a>havaianas flip flops
    <div style="height:800px;"></div>
    <a class="img" rel="http://www.vicsjavascripts.org.uk/StdImages/Three.gif"><img src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" width="50" height="50" /></a>
    
    </body>
    </html>
    Last edited by natalstone; 05-11-2011 at 03:57 PM.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •