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.
<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;
}
// 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");
// 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).