Ink.UI.LazyLoad sample

Scroll down (slowly!) and see the images loading only when they come on screen.


Ink.requireModules(['Ink.UI.LazyLoad_1'], function(LazyLoad) {
    new LazyLoad('.lazyload-container', {
        delta: -100,
        placeholder: 'http://cdn.ink.sapo.pt/2.2.1/img/logo_home.png',
        onInsideViewport: function(data){
            var newElm = document.createElement('p');
            newElm.innerHTML = 'image with src="'+data.element.src+'" is now inside the viewport.';
            data.element.parentNode.insertBefore(newElm, data.element);
        }
    });
});