HTML无预加载

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