Version 1.0.0-beta

AngularJS Module for lazy loading content. This module exposes custom angular directives and a service provider for loading content lazily. The intent of this application is to simplify lazy loading html content by breaking it into the basic elements of the lazy loading process.

[Source Repository can be found here][https://github.com/gejustin/angular-lazy-load]

• The test functions provided to the directive will be used to determine whether or not some piece of content is ready to be loaded.

• The callback functions provided to the directive will be executed whenever the test functions for the current instance return true.

• The event-types provided to the directive are used to re-evalute the test function again. If the initial test returns false, event listeners are set up to run the test again.
• These can be any native events or custom events.

1. Install this package via Bower.

2. Load the script into your angular js application.

   Supports CommonJS and AMD Module loaders.

3. Add this module to your application.

   angular.module('your.module', ['garyjustin.lazyLoad']);

During the configuration phase of your angular application, you can setup application wide test and callback caches using the lazyLoadProvider. These methods return the provider and are chainable.

disableLazyLoading() - Calling this method on the provider will prevent all test functions and events and immediately fire all callbacks immediately.

setCallbacksCache(cache) - Configure an application wide callback function cache. These callbacks can be referenced in the directive or service by the property name on the cache object.

setTestsCache(cache) - Configure an application wide test function cache. These callbacks can be referenced in the directive or service by the property name on the cache object.

angular.module('your.module)
    .config(['lazyLoadProvider', function(lazyLoadProvider){
        lazyLoadProvider
            .setTestsCache({
                IS_ACTIVE: function (element, params, options) {
                    return element.classList.contains('active');
                }
            })
            .setCallbacksCache({
                LAZY_IMAGE: function (element, params, options) {
                    element.setAttribute('src', element.getAttribute('data-src')); 
                }
            })
    }]);

This directive creates new scope.

This directive executes at priority level 0.

test-cache - {String} Space separated list of identifiers for functions defined in the testsCache.

callback-cache - {String} Space separated list of identifiers for functions defined in the callbacksCache.

event-types - {String} Space separated list of native or custom events to use if the initial evaluation of the test function(s) fails.

force-event - {Boolean} If true, the service will bypass the initial test evaluation and add the event listeners.

event-delay - {Number} Time in milliseconds to wait after events before calling the handlers (debounce).

params - {Object} Object of custom parameters passed to all test and calback functions.

<!-- using attribute directives -->
<ANY lazy-load 
     test-cache="MY_TEST_FN" 
     callback-cache="MY_CALLBACK_FN"
     event-types="scroll keyup customEvent"
     force-event="someBoolean"
     event-delay="500"
     params="{ 'param1': value }">
 </ANY>

<!-- or by using element directives -->
<lazy-load callback-cache="MY_CALLBACK_FN" event-types="scroll" params="{ 'param1': value }">
    <ANY>Some content to be lazy loaded.</ANY>
 </lazy-load>

When used as an element, the directive automatically adds a callback function that will append the transcluded content to the DOM.

You can also use the functionality as a standalone service in your own custom directive or javascript by calling the lazyLoad method.

element - {Object} standard HTMLElement returned by native methods like getElementById.

params - {Object} custom dictionary of parameters to be passed to all test and callback functions.

options - {Object} options object to override default settings.

angular.module('your.module)
    .controller(['lazyLoad'], function(lazyLoad){
        
        lazyLoad.lazyLoad(document.getElementById('someId'), {
            param1: 'value',
            param2: 23
        }, {
            //array of function objects or object key of a function in your testCache
            tests: [myTestFn, 'TEST_FROM_CACHE'],
            //array of function objects or object key of a function in your callbackCache
            callbacks: [callbackFn, 'CB_FROM_CACHE', function(){ /* some anonymous function */ }],
            //array of event names
            eventTypes: ['scroll', 'touchmove'],
            forceEvent: false,
            eventDelay: 250
        }):
    })