Example: Load Elements by Events

By default Lazy will start working right after page load. But what if you want to start Lazy on other events, like click or something else? There is a way to do this. All you need is to set the bind parameter to event instead of load. If you want to load all elements at once after the event was triggered you can even add the delay parameter with zero.

Please remember, if you just want to load all images on an existing Lazy instance use the loadAll function and don't create a new instance. Take a look a the Instances & Public Functions example then.

 

start using lazy
load all images

 


    <!-- buttons -->
    <button type="button" class="start">start using lazy</button>
    <button type="button" class="loadAll">load all images</button>

    <!-- images -->
    <img class="lazy" data-src="images/1.jpg" />
    <img class="lazy" data-src="images/2.jpg" />
    <img class="lazy" data-src="images/3.jpg" />
    <img class="lazy" data-src="images/4.jpg" />
    <img class="lazy" data-src="images/5.jpg" />
    <img class="lazy" data-src="images/6.jpg" />
    <img class="lazy" data-src="images/7.jpg" />
    <img class="lazy" data-src="images/8.jpg" />
    <img class="lazy" data-src="images/9.jpg" />
    <img class="lazy" data-src="images/0.jpg" />
                  

    img.lazy {
        width: 700px; 
        height: 467px; 
        display: block;
    }
                  

    $(function() {
        $('button.start').click(function() {
            $('img.lazy').lazy({
                bind: "event"
            });
        });
        
        $('button.loadAll').click(function() {
            $('.lazy').lazy({
                bind: "event",
                delay: 0
            });
        });
    });

 

Note: All examples verbose their actions to the sidebar on the left and even to your browsers console by console.log. Check the output there (hit F12 key to open your browsers dev tools).

Demonstration