Question

I have to use some gallery with JQuery (I’m using Galleria). The problem is that the structure is like:

<div id="galleria">
   <img src="(...).jpg" />
   <img src="(...).jpg" />
   <img src="(...).jpg" />
   <!-- ... -->
</div>

The plugin takes all photos from that list and use them. The problem: I have a lot of high-quality photos. And all they are preloaded before plugin can use them. Are there any ways to load images dynamically? (Maybe, some new gallery plugin).

Answer 1

That’s where jQuery LazyLoad plugin comes in handy 🙂

Lazy loader is a jQuery plugin written
in JavaScript. It delays loading of
images in (long) web pages. Images
outside of viewport (visible part of
web page) wont be loaded before user
scrolls to them. This is opposite of
image preloading.

Using lazy load on long web pages
containing many large images makes the
page load faster. Browser will be in
ready state after loading visible
images. In some cases it can also help
to reduce server load.

Demo Page