Keep images loaded in a scrolling DIV

Question

I have many images inside of a scrolling DIV for an image gallery and the images are only loading when they become visible in the DIV after you scroll down. This is causing the DIV to freeze trying to load the images. Is there any way that I can fix this? I'm sure it would probably be javascript related.

Just my simple DIV.

<div style="width:275;height:400;overflow-x:scroll;">

content

</div>

Answer 1

http://www.techrepublic.com/article/preloading-and-the-javascript-image-object/5214317

You can pre-load the images with javascript

Answer 2

You need to preload the images. Try this way if you don't want to use Javascript.

Answer 3

Yes, and in fact there are many related libs for this purpose. mostly for bandwidth saving purpose for old browsers, but will do the same work as you wanted here.

http://yuilibrary.com/yui/docs/imageloader/

http://www.appelsiini.net/projects/lazyload

at the same time, if your image are very big in size and you have a very long line of them, remember to hide (display: none) them after they become invisible from view.

Answer 4

Try using this lazy load script which will load the images before fixed number of pixels before they reach the visible area. This has many options

http://www.appelsiini.net/projects/lazyload

Answer 5

function expandDiv(idOfDivElement) {
    divObj = document.getElementById(idOfDivElement);
    var imageObj = document.createElement('img');
    imageObj.setAttribute('src', 'path/example_image.jpg');
    divObj.appendChild(imageObj);
    // your expand div code here
}