Plugins can extend the functionality of all Lazy instances at once. Not like custom loaders for single instances. To create an own loader plugin, you can use the public function Lazy of jQuery or Zepto to register them.
Note: If you just want to extend a single instance of Lazy, you might want to use a custom loader instead of a plugin.
<div class="lazy" id="box-1" data-loader="examplePlugin">not loaded</div>
<div class="lazy" id="box-2" data-loader="examplePlugin">not loaded</div>
<div class="lazy" id="box-3" data-loader="examplePlugin">not loaded</div>
<div class="lazy" id="box-4" data-loader="examplePlugin">not loaded</div>
<div class="lazy" id="box-5" data-loader="examplePlugin">not loaded</div>
<div class="lazy" id="box-6" data-loader="examplePlugin">not loaded</div>
<div class="lazy" id="box-7" data-loader="examplePlugin">not loaded</div>
<div class="lazy" id="box-8" data-loader="examplePlugin">not loaded</div>
<div class="lazy" id="box-9" data-loader="examplePlugin">not loaded</div>
<div class="lazy" id="box-0" data-loader="examplePlugin">not loaded</div>
div.lazy {
width: 700px;
height: 467px;
line-height: 467px;
background: #f2dede;
color: #a94442;
}
div.lazy.loaded {
background: #dff0d8;
color: #3c763d;
}
Create your plugin, wrapped in an IIFE:
(function($) {
$.Lazy('examplePlugin', function(element, response) {
// just for demonstration, write some text inside element
element.html('successfully loaded div#' + element.attr('id'))
.addClass("loaded");
// return loaded state to Lazy
response(true);
});
})(window.jQuery || window.Zepto);
Start Lazy as usually:
$(function() {
$('.lazy').lazy();
});
Plugins should always tell it's loading state back to Lazy. This is needed for correct event triggering, like afterLoad and onError. If you're writing a plugin for Zepto, or planning to publish it, you should always use the response function, and not elements function load and error, because Zepto has problems with this functions.
// best practice for supporting Zepto is to use the 'response' function
(function($) {
$.Lazy('examplePlugin', function(element, response) {
if( loaded ) {
// triggers 'afterLoad' and 'onFinishedAll'
response(true);
}
else {
// triggers 'onError' and 'onFinishedAll'
response(false);
}
});
})(window.jQuery || window.Zepto);
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).