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

**vwphillips** · 11-08-2010, 01:52 PM

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

**fonzzie** · 11-08-2010, 04: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, 05: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, 10: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, 04:50 PM

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

nfl.rantsports.com

**fonzzie** · 11-09-2010, 07: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

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!

**vwphillips** · 04-08-2011, 04:32 PM

post a link to your page

**meyersday** · 05-10-2011, 09:41 PM

Originally Posted by vwphillips

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

Originally Posted by vwphillips

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>

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

Thread Tools

Search Thread

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

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

Bookmarks

Bookmarks

Posting Permissions