Here, try this, it should lead you to the right way.
Not sure how you can manage the
src's, because you can't store them in the image and keep the image unloaded at the same time (Well, maybe you could store them as ALT text or a TITLE), but you decide.
But as
gits said, if I were you, I'd consider redesign ;)
Good luck
-
function getPosition(Object)
-
{
-
if('undefined' != typeof(Object.offsetParent))
-
{
-
for(var posX=0,posY=0;Object;Object=Object.offsetParent)
-
{
-
posX += Object.offsetLeft;
-
posY += Object.offsetTop;
-
}
-
return [posX,posY];
-
}
-
else
-
{
-
return [Object.x,Object.y];
-
}
-
}
-
-
window.onscroll = function()
-
{
-
var scrollTop = document.body.scrollTop;
-
var innerHeight = window.innerHeight;
-
-
var images = document.getElementsByName("myImage");
-
-
for(var i=0;i<images.length;i++)
-
{
-
var imageHeight = getPosition(images[i])[1];
-
if(imageHeight > scrollTop && imageHeight < (scrollTop + innerHeight))
-
{
-
images[i].src = images_src[i];
-
}
-
}
-
}
-
-
var images_src = [];
-
-
for(var i=0;i<200;i++)
-
{
-
images_src[i] = 'http://www.google.com/intl/en_ALL/images/logo.gif';
-
var img = document.createElement("img");
-
img.width = 276;
-
img.height = 110;
-
img.name = "myImage";
-
document.body.appendChild(img);
-
document.body.appendChild(document.createElement("br"));
-
}
-
