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

View Full Version : 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

<!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, 12:20 PM

please post a link to your page

fonzzie

11-07-2010, 01: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, 09: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, 09: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, 12:29 PM

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

vwphillips

11-08-2010, 02:52 PM

this modification will ensure the image is loaded from the server

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

fonzzie

11-08-2010, 05:14 PM

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

gbrown88

11-09-2010, 06:17 AM

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

vwphillips

11-09-2010, 11:22 AM

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

your page does not do this.

gbrown88

11-09-2010, 05:50 PM

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

nfl.rantsports.com

fonzzie

11-09-2010, 08:27 PM

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

dan2600

04-08-2011, 03:41 PM

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

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!

vwphillips

04-08-2011, 04:32 PM

post a link to your page

meyersday

05-10-2011, 09:41 PM

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

natalstone

05-11-2011, 02:23 PM

This code was useful to me too ;)

<!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 (http://havaianasflipflops.org/)
<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>

dattanman

11-23-2011, 08:19 AM

Is there a way to make all the images within the <body></body> tag fade when scrolled down to?

I'm trying to implement it into my Tumblr blog, and although it would work for photo posts, I cannot achieve that same effect with text posts where I would have to go, one by one, adding the "<a class="img" rel="{image ulr}".... </a>" It just seems like a pain and I feel like there could be a different way to approach this.

Thanks!