I have some code running on my website which will detect if a div
with the id, photo
, is showing on the screen or is scrolled onto the screen. If the div
is showing, a class
is added to the div
which will cause a background image to load inside the div
. The intent is to lazyload the image so that the site loads faster.
It is working great in all browsers except for IE 6/7. Can someone tell me what is wrong with the below code that prevents it from working in these IE browsers?
function $(a){
return document.getElementById(a)
}
function scrll(){
function a(d){
var f=d.offsetTop,
e=d.offsetLeft,
c=d.offsetWidth,
b=d.offsetHeight;
while(d.offsetParent){
d=d.offsetParent;
f+=d.offsetTop;
e+=d.offsetLeft
}
return(f<(window.pageYOffset+window.innerHeight)
&&e<(window.pageXOffset+window.innerWidth)
&&(f+b)>window.pageYOffset&&(e+c)>window.pageXOffset)
}
if(a($("photo"))){
$("imgholder").className="pic11 pic21";
if(window.removeEventListener){
window.removeEventListener("scroll",scrll,false)
}else{
if(window.detachEvent){
window.detachEvent("onscroll",scrll)
}else{
window.onscroll=null
}
}
}
}
if(window.addEventListener){
window.addEventListener("scroll",scrll,false);
}else{
if(window.attachEvent){
window.attachEvent("onscroll",scrll);
}else{
window.onscroll=scrll;
}
}
setTimeout(scrll,1);
The code is active on my website: http://www.ericperrets.info/
IE doesn't have innerHeight
. Use this function instead:
function getWindowHeight()
{
if (window.innerHeight) return window.innerHeight;
if (window.document.documentElement.clientHeight) return window.document.documentElement.clientHeight;
return window.document.body.clientHeight;
}
Also, a good article explaining differences between browsers is at http://www.howtocreate.co.uk/tutorials/javascript/browserwindow