Observable

Micro-library for easily implementing lazy-loading, infinite-scrolling and scroll effects into your site.

Under development.

Demos

• Playground

Install

npm

npm install mobius1-observable --save

const observer = new Observable({
    items: items, //  the elements to observe
    threshold: 100, // 0 - 100
    rootMargin: 0,
    lazyLoad: false, // enable / disable lazy-loading images
    lazyLoadThreshold: 0.5, // visibility ratio before image is loaded
    callback: function(node, data) {
        // visibility change
    },
    infiniteScroll: {
        url: "/path/to/data", // ajax url to fetch pages
        params: {
            // extra params to be added to request
        },
        pageParam: "_page", // page number param to add to the request
        limitParam: "_limit", // limit param to add to the request
        limit: 10, // limit number of items to fetch
        next: false, // define an element to fetch the next page. If false, the request is automatic        
        onBeforeLoad: () => {}, // fires before request
        onLoad: () => {}, // fires when request is complete
    },
    onItemVisible: function(item) {
        // callback when item is fully visible
    }
});