-
Notifications
You must be signed in to change notification settings - Fork 32
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
added on resize event to adjust images when resizing window #17
base: master
Are you sure you want to change the base?
Conversation
@jonasjonas Why does the resize use case matter to you? The downside of your approach is that resize now becomes very expensive, since a lot of JS needs to run to recalculate which image to load, etc. I don't think it's a worthwhile tradeoff. |
Because I would guess that the browser would behave like this:
I think I should optimize the resize-event not to run this code on every event call but only after a small timeout when resizing has apparently stopped. |
Use case: So if you are on the site, and then go to the fullscreen presentation mode you'll get a higher resolution image. |
Conflicts: build/srcset.min.js
I think a function in the global scope that optionally accepted a list of img elements would be very helpful. It would be easy to process images The script should still process all images on function main() {
// ...
processSrcset(); // assume document.querySelectorAll("img")
} But a developer could call the function with a list of images at any time: window.onresize = debounce( function (e) {
processSrcset();
}, 250, false );
// or
$.get( "ajax/content.html", function ( data ) {
$( ".result" ).html( data );
processSrcset( $( ".result img" ) );
}); |
The global function should be there, because otherwise we won't be able to use it with ajax requested images. For the resize case: |
Global function makes a lot of sense. used with a library like underscore in a modern JS app: var lazyprocessSrcset = _.debounce(processSrcset, 300);
$(window).resize(lazyprocessSrcset); At present it is impossible to use this polyfill with dynamic content due to the fact it only fires on page load. |
This would add a resize event to update images based in the current window size.
One possible optimization:
Don't call main() on every resize but only after a timeout, so the code does not run continuously when resizing.