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

**evanmiller2007** · 07-01-2009, 02:42 PM

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

**vwphillips** · 07-04-2009, 11:57 AM

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>

**evanmiller2007** · 07-06-2009, 06:01 PM

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

**gbrown88** · 11-03-2010, 01:14 AM

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

**fonzzie** · 11-06-2010, 11:10 PM

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

**vwphillips** · 11-07-2010, 11:20 AM

please post a link to your page

**fonzzie** · 11-07-2010, 12:14 PM

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

**fonzzie** · 11-07-2010, 08:18 PM

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?

**djr33** · 11-07-2010, 08:24 PM

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

**fonzzie** · 11-08-2010, 11:29 AM

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