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' />