Lazy Loading

Enables the accordion to load images only when they are in view. It makes sense to use it when there are multiple pages in the accordion, so that images from other pages are not loaded until the user navigates to that page.

Example:

<div class="ga-panel">
    <img class="ga-background" src="path/to/blank.gif" data-src="path/to/image1.jpg"/>
</div>

<div class="ga-panel">
    <a href="http://bqworks.com">
        <img class="ga-background" src="path/to/blank.gif" data-src="path/to/image2.jpg"/>
    </a>
</div>

<div class="ga-panel">
    <img class="ga-background" src="path/to/blank.gif" data-src="path/to/image3.jpg"/>
</div>

The src attribute of the image will point to a placeholder image, and the actual image will be specified in the data-src attribute. When the panel becomes visible, the placeholder image will be replaced by the actual image. You can use the placeholder image that comes with the accordion, or you can create your own placeholder image. The bundled placeholder image is located in dist/css/images/blank.gif and it's a 1 pixel by 1 pixel blank image.

This module is showcased in example1.html and example3.html.

Have more questions? Submit a request

0 Comments

Article is closed for comments.
Powered by Zendesk