Being lazy with image loading...
Fri, 06 July 2018
example.js
var runLoad = function() {
var lazy = $('img.im-lazy');
if (lazy.length > 0) {
for (var i=0;i<lazy.length;i++){
if ($(lazy[i]).visible(true) === true) {
$(lazy[i]).attr('src', $(lazy[i]).attr('data-src'));
$(lazy[i]).removeAttr('data-src');
$(lazy[i]).removeClass('im-lazy');
}
}
}
};
addEventListener('lazyLoad', function(){
runLoad();
});
addEventListener('scroll', function(){
runLoad();
});
example.html
<img src='/some/path/to/temporary/loading.gif' data-src='/path/to/actual/file-1.jpg' class='im-lazy' /> <img src='/some/path/to/temporary/loading.gif' data-src='/path/to/actual/file-2.jpg' class='im-lazy' />