Closed jacmaes closed 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:
I completely agree that performance should not be compromised for this nice-to-have, but not critical feature. Thanks for considering it.
have a look at the readme (your idea in my cryptic language as a reminder) and IE8 support as a bonus :p
Wonderful. IE8 support is a great addition.
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.
@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:
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?
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.
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:
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?