Example: Callback Functions

The Lazy plugin delivers four callback functions, which get triggered on different points of loading an element. You can use them to extend the functionality of the plugin and may get a more dynamic experience fou you and your users.

All you need is to set a function to the beforeLoad, afterLoad, onError and/or onFinishedAll config option. Lazy will pass the current jQuery element as function parameter to the callback, so you can directly handle them.

You may have noticed the left sidebar in all of the Lazy examples and the output in your browsers console. The update of the sidebar and the data is even realized with this callback functions. 


    <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/missing.jpg" />
                  

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

    $(function() {
        $('.lazy').lazy({
            // called before an elements gets handled
            beforeLoad: function(element) {
                var imageSrc = element.data('src');
                console.log('image "' + imageSrc + '" is about to be loaded');
            },
            
            // called after an element was successfully handled
            afterLoad: function(element) {
                var imageSrc = element.data('src');
                console.log('image "' + imageSrc + '" was loaded successfully');
            },
            
            // called whenever an element could not be handled
            onError: function(element) {
                var imageSrc = element.data('src');
                console.log('image "' + imageSrc + '" could not be loaded');
            }
            
            // called once all elements was handled
            onFinishedAll: function() {
                console.log('finished loading all images');
            }
        });
    });

 

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