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>
http://www.techrepublic.com/article/preloading-and-the-javascript-image-object/5214317
You can pre-load the images with javascript
You need to preload the images. Try this way if you don't want to use Javascript.
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.
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
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
}
