search

joeyvandijk / rimg

[DEPRECATED] A responsive image solution for browsers that support mediaqueries. Pure javascript and no server-side code.
http://joeyvandijk.github.io/rimg
MIT License
294 stars 25 forks source link

Lazy loading #8

Closed jacmaes closed 10 years ago

jacmaes commented 10 years ago

Hi again,

I was wondering whether you've considered adding an option to lazy load images, by which I mean loading images only when they're inside the viewport. Maybe something based on Todd Motto's Echo.js? http://toddmotto.com/echo-js-simple-javascript-image-lazy-loading/

Would that be feasible / desirable?

joeyvandijk commented 10 years ago

Thanks, saw it passing by on my feeds, but will look into it. Hope soon, but I have to keep in mind that any extra listeners will have a performance penalty. How much will decide if I will implement Echo-js-approach or find another one.

Thanks again for the tip and I will keep this issue open, until I have a solution/choice made. :+1:

jacmaes commented 10 years ago

I completely agree that performance should not be compromised for this nice-to-have, but not critical feature. Thanks for considering it.

joeyvandijk commented 10 years ago

have a look at the readme (your idea in my cryptic language as a reminder) and IE8 support as a bonus :p

jacmaes commented 10 years ago

Wonderful. IE8 support is a great addition.

mjau-mjau commented 10 years ago

Just looking through some posts in my search for the ultimate lazy-loader and device-image-manager combo and came across this post. Rimg certainly looks like the best responsive image handler I have seen - I like the fact that we don't need to bloat src references directly in the html code like many other scripts require, and instead use a filenaming pattern so the JS handles the logic.

It would be cool to have a lazy-loader script integrated, although I can understand that would turn this plugin into something completely different. It would be pretty easy to combine it with another lazy-loading script of course ... I would likely just customize Rimg to update data-src instead of setting src directly, and then when the lazy loader fires, it will look for the updated data-src. It would get more complicated if you want to trigger rimg manually of course, or on window resize ...

Just wanted to mention, with a lazy loader, you should be adding a throttle function to limit how often the scroll event fires, which will improve performance.

I have a question, sorry for posting in this same thread:

1. You mention in your docs:

Rimg uses an adapted version of the srcset specification, while you don't need to define with every image 3(+) breakpoints. Just provide the image basename and let Rimg do the adjustments.

How exactly does this work? If I define 4 breakpoints, and the file image-(name) for a given breakpoint is missing? I would assume rimg injects the src, and if the file does not exist, it will break the img.

Btw, here is a project that has both lazy loading and multi-serving images, but it is inferior to rimg in the way it handles responsive images https://github.com/dinbror/blazy.

joeyvandijk commented 10 years ago

@suncat100 thnx for the feedback and tips! Will certainly have a look at them.

Answer @ your question:

If you miss a file, everything will be executed and yes the src-attribute will be set, but set to a file that is not available and so your browser will show a "broken"-icon.

Will keep this thread open until I have finished lazy-loading, but like I said below, I am wondering if I need to do rewrite to keep RIMG performant and memory efficient.

FYI & mucho gracias! :+1:

joeyvandijk commented 10 years ago

Here we go, I have looked at echo-js and blazy and it helped me implementing lazy loading in Rimg v1.5.0! Have a look. :+1:

jacmaes commented 10 years ago

Hi there. I've just noticed that in your "lazyloading.html" example file, the aspect ratio is not respected on narrower screens. This applies to all images (they're clearly stretched up vertically) on Webkit / Blink browsers (I tested on Safari, Chrome and Opera); Firefox handles everything well. Any ideas?

joeyvandijk commented 10 years ago

Hi Jac,

I also see it, but did not notice it before. Thanks for the reply, but I believe it has to do with the way I set up the CSS. Rimg is following CSS and only determining which src-property is valid. It does not change the width/height of the <img>.

I will look into this, but I believe it is a mistake in the example CSS. Give me a week, because of deadlines, but will fix the example.

joeyvandijk commented 10 years ago

Hi Jac,

indeed it was a CSS issue, not with RIMG, but my wrong. I have changed it with a mediaquery and now it should work nicely.

Thanks again for the note! :+1: