Page 1 of 3 123 LastLast
Results 1 to 10 of 21

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

  1. #1
    Join Date
    May 2009
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts

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

    Hey guys. A while ago I came across a script that makes the images on your page wait to load until the browser scrolls down to them. At the time I wasn't interested and I didn't bookmark the site (it may have been a Dynamic Drive script, I don't remember and I don't see it in the "Images" section).

    Anyways, trolling around the internet I found this site, which seems to use just such a script:
    http://butdoesitfloat.com/

    I really like how it works on this page, especially how the images fade in just as you scroll down to them. I was thinking about implementing just such an effect on my site, but now I can't find the script for the life of me. I've tried searching on Google but its hard to think of good search terms to look for this. I looked in the source of the does it float website, but I don't see any links to where i can get the script.

    does anyone know the script i'm looking for?

    any help would be appreciated. Thanks!

    evan

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

    Default

    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>
    <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>

  3. #3
    Join Date
    May 2009
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    sorry for the delay, but i just now had a chance to test this out and it works perfectly! thank you so much for the help, i'm looking forward to using this script when i finally get around to redesigning my website.

    thanks again
    evan

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

    Default

    Hi,

    This script looks great! I've got it installed on my website and its not quite working 100% correctly. I believe its because I'm passing my image through timthumb.php.

    The picture loads and fades in as you scroll down the page, but after the picture finishes loading, it quickly goes to blank after.

    Any suggestions?

    Thanks
    Grant

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

    Default

    It's working fine on my website, except for ... IE of course.
    In IE 8 the fade is taking minutes to complete

    I temporary resolved this by removing the fade in IE

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

    But I hope there is someone out there who can fix this because my javascript knowledge is from the stoneage

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

    Default

    please 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/

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

    fonzzie (11-08-2010)

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

    Default

    Ok, the script works with IE , just not the way I implemented it

    the javascript part I have put in a .js in the header
    Then i removed the <body onload="ImgLoad('img')">
    and added

    <script language="javascript" type="text/javascript">
    ImgLoad('img');
    </script>

    at the bottom of the page

    I removed the witdh and height in the image src

    I recreated this situation with the clean script...and it still works fine
    I must have some conflicting javascript I guess!!

    Anyway, the script is running on http://www.segunda-mao.net


    You could also put some configs in the javascript..

    like preloading 200 px below the fold for example ... window.innerHeight+200
    faster or slower fading etc....
    Last edited by fonzzie; 11-07-2010 at 02:54 PM.

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

    Default

    Another question..

    If the images are already in the browsercache, does the script fetch the images from there? or does it fetch them from the server, over and over again?

  10. #9
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,164
    Thanks
    265
    Thanked 690 Times in 678 Posts

    Default

    Generally speaking (and I'm not sure if there is something unusual/special about this script), the browser is told by the script to request a file (an image), then the browser loads that image-- if it is in the cache, then it will load from there. If not, it must be loaded from the server.

    There are ways to control whether or not it is cached, but this is usually not something that is done using Javascript (in fact it is very difficult to force).
    Daniel - Freelance Web Design | <?php?> | <html>| espa˝ol | Deutsch | italiano | portuguŕs | catalÓ | un peu de franšais | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

  11. The Following User Says Thank You to djr33 For This Useful Post:

    fonzzie (11-08-2010)

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

    Default conflict

    After doing a zillion tests I know now for sure there is a conflict somewhere.

    On my searchpages the fade goes wrong in IE
    On other pages everything goes normal

    Could the fade function have conflicts with css,html or other javascript?

    It looks like the ...setTimeout(function(){ oop.fade(); },10); is slowed down somehow
    Last edited by fonzzie; 11-08-2010 at 03:13 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
  •