Lazy load and unload of images

Question

I have an html file with many tags.

I want to load images on scroll event, and unload the images which are not visible. like in Aamzaon viewer, when you scroll up/down, the current image in the frame is lazy loaded.

I saw a lot of LazyLoad tools, but no one of them has unload functionallity.

Answer 1

Use this plugins jquery: https://github.com/morr/jquery.appear And use event: appear to display images and disappear to unload images:

$('someselector').on('appear', function(event, $all_appeared_elements) {
  // this element is now inside browser viewport
});
$('someselector').on('disappear', function(event, $all_disappeared_elements) {
  // this element is now outside browser viewport
});