html - Automatically begin lazy loading images without waiting for user to scroll down page -

websites lazy load images user scrolls down page allow initial viewed top portion of page load faster.

instead of waiting until user decides scroll down page, possible detect when top images have been downloaded client (or accessed via cached images), , start downloading next set of images? if so, how?

see demo in jsfiddle. implementation quite straightforward: listen window.onload first time, wait until complete page has been loaded. once fires, load next image , listen onload event. repeat that, until no more images need preloading:

function loadnext() {     var img = findnextimagetopreload();      img.load(function () {         loadnext();     });     setimgsrconimagesoitstartspreloading(img); }  $(window).load(function () {     loadnext(); }); 

this basic idea , not working loadnext function. 1 implemented in jsfiddle loads 1 image after another. if want able load multiple images @ once need call loadnext multiple times.

in case, need additional check if images scrolled/brought view before has been preloaded. you’d want start loading immediately.

also aware browsers might avoid loading image if isn’t visible. mobile browsers in cases. can use deelay.me that. if loadnext run @ same second, need place image somewhere invisible user, “visible” browser in order void logic. in cases recommend against tricking browsers because vendors put lot of effort making requests reasonable. highly depends on use case though. hope helps.