Unload on scrollout

[raphaeleidus]

This pull requests add 2 configurations option unload and placeholder
unload is a boolean option
placeholder is a string
When unload is true, now when the image scrolls out off the screen it will change the image back to the placeholder image. This is valuable for devices with limited memory (mobile devices). Images that are not on display don't need to be kept in memory.

In order to make this work I had to fix a bug where every image above the screen was automatically loaded. If you scroll to the bottom of a echo.js enabled page and refresh, when the page loads you will be at the bottom of the page but all the images above the screen are loaded immediately instead of lazily.

I added two other options for flexibility, but they aren't really needed, offsetBot and offsetTop. They allow you to individually set the padding above and below the window. They fallback to use the offset option if one of them is not provided.

[toddmotto]

Thanks for this, some great stuff.

I have a question or two. Would it be better do you think to cache the initial image source (which might be blank.gif or whatever...), and store that reference on a holder attribute, and unload to that reference rather than another placeholder, as this introduces a third item (unless I've misunderstood your PR).

That way there'd be no need for a placeholder, and we just use their original image src (which would work great if the src was the same, which the assumed use case generally is). It'd most likely be quicker on a performance perspective using the placeholder method, however (no batching of read/write). But it allows users to then load a third image - which I'm not overly keen on as we want to use that initial 1kb image already in memory for example.

Thoughts appreciated!

[raphaeleidus]

Hey todd, my first attempt read a data-echo-placeholder attribute which wasn't terrible but made the markup ugly. I will make it write that to that so the original markup doesn't bloat.

[toddmotto]

Yep I saw that. Open to both options, just wondering which you think is best, and of course with heavy images we want to think about mobiles - so the better on mobile option might sway it. :)

[raphaeleidus]

I think it makes more sense to store it on the element, so that it retains the flexibility of being able to specify different placeholder for different images, which is doable now. This is a pretty happy medium, so I am comfortable with it.

[raphaeleidus]

okay my last commit made that change

[raphaeleidus]

@toddmotto when merging in the callback work I made it so the callback function would be passed two parameters, the element and the operation being done, "load" or "unload" I figured this would be preferable to having to pass in 2 callbacks one for load and one for unload, but let me know what you think.

[raphaeleidus]

@toddmotto can this be merged?

[toddmotto]

Thanks @raphaeleidus ! 👍