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.

http://stackoverflow.com/questions/12553528/how-can-i-set-divs-to-visibilityhidden-if-they-are-outside-of-viewport — mplungjan, Oct 03 '13 at 07:59
Obviously, I am looking for a plugin or code that implement this functionallity... @mplungjan thanks for the reference, but I don't want to hide the content, I want to remove it. — Inbal, Oct 03 '13 at 08:50
@Gupta.Swap I can have really big documents (every page is an image) and I want good performance. In amazon, when you open a book with a lot of pages, every page is loaded according to the scroller — Inbal, Oct 03 '13 at 08:51

score 2 · Answer 1 · answered Oct 03 '13 at 08:50

2

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
});

answered Oct 03 '13 at 08:50

Eric Sanchez

1,111
1
9
8

Then your test results? – Eric Sanchez Oct 07 '13 at 20:41
Hi Eric, I decided to use LazyLoad and I just changed this code to do "unload" too. Thanks anyway for the help! :) – Inbal Oct 08 '13 at 07:43
@Inbal Might I ask how you modified the lazyload plugin? I tried just adding `$this.attr("src", settings.placeholder);` to the "if abovethefold" condition, but it seems it may be a bit more complex than that...? the update doesn't seem to get triggered after the images have been lazy-loaded once – Iain Mullan Oct 30 '13 at 14:53
1

@IainMullan I binded another event named "disappear", which is the same as "appear", instead of the "src". I change the src attr back to the animated gif. and my "update" function looks like this: if above or below - trigger disappear, else trigger appear – Inbal Oct 30 '13 at 15:19
@Inbal do you mind sharing your fork of appear.js if you still have it? – Sasha Fonseca Mar 31 '17 at 20:36

Lazy load and unload of images

1 Answers1