Example: Instances & Public Functions

Lazy supports multiple instances, even with different configurations. The plugin itself creates a new instance for every selector you make. Each instance offers different public function to control itself. With it you can force Lazy manually to do what you like.

There are currently two ways to receive an instance. By default Lazy is chainable within jQuery and will pass the own instance to every element found by your selector. With the chainable parameter it is even possible to use Lazy in an more object oriented way.

In this example Lazy will not load any images by scrolling. You can use the buttons below to control the instance on this page.

 

update
loadAll
destroy

 


    <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;
    }

Retrieve a Lazy Instance


    // object oriented way, note the chainable parameter
    var instance = $('.lazy').lazy({
        chainable: false
    });

    // grab from elements
    // only works well if you use same selector or a single instance overall
    $('.lazy').lazy();
    var instance = $('.lazy').data("plugin_lazy");

 

Use Public Functions


    // receive configuration entries or set them to a new value
    var value = instance.config('attribute');
    instance.config('attribute', 'data-new-attribute');

	// add new items to the instance
    // this works with an jQuery object or any selector
    // so these two lines have the exact same result
    instance.addItems('img.new-items');
    instance.addItems($('img.new-items'));
    
    // receive all elements left by this instance
    var itemsLeft = instance.getItems();
    
    // loads all elements in current viewport threshold
    instance.update();

	// force load of given items ignoring the viewport 
	// this works with an jQuery object or any selector
    // so these two lines have the exact same result
	instance.force('.new-items');
	instance.force($('.new-items'));

    // loads all remaining elements at once
    instance.loadAll();

    // destroys the current instance completely
    instance.destroy();

 

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