Delayed Content, Image and Background Lazy Loader

Example: Use Custom Loaders

With the custom loaders option there is a powerful solution to load every contents the Lazy way. The plugin will handle everything, you just create a loading method witch got triggered whenever the element hits the visibility threshold. It's still possible to load images and custom loaders in the same Lazy instance.

To use this just define a loader function inside the Lazy initialisation and pass the loader name to the data-loader attribute of the elements witch should be lazy loaded.


    <!-- custom loaders -->
    <div class="lazy" data-loader="customLoaderName"></div>
    <div class="lazy" data-loader="youtubeLoader" data-video="tH2TvzgFCU0"></div>
    <div class="lazy" data-loader="asyncLoader"></div>
    <div class="lazy" data-loader="errorLoader"></div>

    <!-- beside with normal 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" />


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


    $(function() {
        $('.lazy').lazy({
            // loads instantly
            customLoaderName: function(element) {
                element.load();
            },

            // embed a youtube video
            youtubeLoader: function(element) {
                var url = 'https://www.youtube.com/embed/',
                    frame = $('<iframe />')

				frame.attr('width', 700)
				frame.attr('height', 394)
				frame.attr('frameborder', 0)
				frame.attr('src', url + element.data("video"));

			    element.append(frame).load();
            },

            // loads with a five seconds delay
            asyncLoader: function(element) {
                setTimeout(function() {
                    element.load()
                }, 5000);
            },

            // always fail
            errorLoader: function(element) {
                element.error();
            }
        });
    });

Custom loaders can respond it's state back to the plugin. This is highly necessary when you want to use one of the callbacks afterLoad, onError or onFinishedAll beside of your loaders.

Therefor you can either use jQuery's build-in functions load and error, or the response function, given as second parameter to your custom loaders. Both ways do exactly the same, so you only had to choose one of them.

Note: If you're working with Zepto you should only use the response function, because Zepto has problems using load function and throws errors. So just use response for Zepto and you'll be fine.


    // jQuerys' build-in functions
    $('.lazy').lazy({
        successLoader: function(element) {
            element.load();
        },
        errorLoader: function(element) {
            element.error();
        }
    });


    // response callback function
    // best practice for working with Zepto
    $('.lazy').lazy({
        successLoader: function(element, response) {
            response(true);
        },
        errorLoader: function(element, response) {
            response(false);
        }
    });

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).

jQuery.Lazy();

Console

Example: Use Custom Loaders

Demonstration