Loading image when scrollbar moves

[deegeorge]

Hi,
I have 500 images.when clicking on one link it need to load this much images.Its loading
fine.My requirement is load the image only in the viewable area.when scrolling the scrollbar next
viewable area need to be loaded what i need to do


Pls help me
Its urgent


Thanks in advance

[gits]

so you have 500 images in one page? i would suggest a redesign to have some paging mechanism that is a bit more better to handle then. otherwise you would need to connect the scrolling-event to a load mechanism in a way that you react to the scrolloffset and calculate which images has to be loaded then. this is quite easy when all images have the same size and would be a bit more complicated when the (probably height) differs.

kind regards

[Canabeez]

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"));
}