Add srcset support #175
Comments
|
Really no one's having trouble with responsive images + picturefill + imagesLoaded? Since in In the case described ( |
|
+1 |
|
+1 |
|
+1 ! |
|
There is a related topic in the picturefill repo: scottjehl/picturefill#401 |
|
Might be a little off-topic, but I ended up approaching the issue from a different perspective and writing jquery.imagePlaceholder. In short, instead of waiting for the images to be loaded I add empty |
|
While this issue should be solved. I think in most cases the problems that are solved by imagesloaded should be solved in a different way. In general imagesLoaded is mostly used to read and write layout after all images inside a specific widget (slider, masonry or what ever) are loaded. But this has some problems:
So how should we deal with this in a future proof way?
An example for masonry used as a plugin would look something like this: $('.masonry-container').each(function(){
var $masonry = $(this);
var update = function(){
$masonry.masonry();
};
update();
this.addEventListener('load', update, true);
});Most such scripts already bind global events to window.resize to progressively update layout on resize, but I really don't understand, why they don't already bind events to get informed if a children image has changed (and instead wait for all images to be loaded). |
|
@aFarkas: I agree on that, especially that it's bad UX to wait (without visual feedback) for all images in a given layout to be loaded until doing the layout math. But regarding your post I was wondering:
How to programmatically achieve this in case of art directed responsive images using
I must admit that I've never seen this pattern using the load event on generic DOM elements to check for child images to be loaded? And wasn' t Despite most demos btw, your gist is doing a pretty good job for this use case :) |
By extending the normal intrinsic ratio pattern with media queries: <style>
.ratio-container {
position: relative;
}
.ratio-container:after {
content: '';
display: block;
height: 0;
width: 100%;
content: "";
}
.ratio-container > * {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
}
.ratio-container:after {
/* 600 / 14 */
padding-bottom: 42.857%;
}
@media (max-width: 1050px) {
.ratio-container:after {
/* 600 / 9 */
padding-bottom: 66.666%;
}
}
@media (max-width: 500px) {
.ratio-container:after {
/* 40000 / 525 */
padding-bottom: 76.19%;
}
}
</style>
<picture class="intrinsic-ratio">
<!--[if IE 9]><video style="display: none;"><![endif]-->
<source
srcset="http://placehold.it/525x400"
media="(max-width: 500px)" />
<source
srcset="http://placehold.it/900x600/e8117f/fff"
media="(max-width: 1050px)" />
<source
srcset="http://placehold.it/1400x600/117fe8/fff" />
<!--[if IE 9]></video><![endif]-->
<img
src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
alt="image with artdirection" />
</picture>
Sad story, this still needs to be standardized, but is put on hold until a CSS specification for aspect ratio is ready.
Yep, exactly. here is the script.
I would assume, because the combination of event capturing and event delegation isn't well known (and isn't even possible with jQuery/IE8-).
The Also note, that most bugs are already fixed and the most annoying one was just fixed. In the very near future you will be able to do this: var img = document.querySelector('img');
var onComplete = function(){
//do it
};
if(img.complete){
onComplete();
}
img.addEventListener('load', onComplete);
img.addEventListener('error', onComplete); |
|
Thanks for clarifying, great work! Looking forward to the day these things are not only spec'd but have broader browser support, too... PS: I think there is a typo in your last code snippet, shouldn't |
|
@hatsumatsu |
|
+1.. imagesloaded also doesn't work here with "srcset" |
|
oh, just used a ratio-container, and fixed my issues with masonry ;) thank you @aFarkas ! your posts here helped me a lot! <3 |
desandro
changed the title
|
+1 |
|
+1 |
|
Has there been any progress to getting imagesLoaded to work with srcset? This thread is over two years old. I'm having a lot of problems getting my Masonry+ImagesLoaded+InfiniteScroll to play nicely on Safari with retina displays (both iOS and Mac). I'm getting a lot of overlapping. Does anyone have an interim solution to this? An alternative script besides imagesLoaded? Sample of my masonry item's html: the javascript I'm using |
Sorry, no news on my front. I'm happy to look over Pull Requests if submitted. Add your 👍 reaction to the original comment on top to add your support. Do not add +1 comments — They will be deleted. |
|
Is it a known bug that there is a side-affect where the browser will end up loading two images? I am seeing an issue where the browser loads the srcset image and then a little later imagesLoaded loads the fallback image. In many cases the fallback image is much larger since it is not size-selected by the browser. |
|
I'm seeing that same behavior |
- use currentSrc - emit progress with <picture> - ✅ add <picture> test - ✅ test srcset - add test css - remove bower_components
|
imagesLoaded v5 has been released with full support for Thank you for your patience all these years! ❤️ |
Using the recommended markup (http://www.filamentgroup.com/lab/to-picturefill.html) for
<img>withsrcsetwhile using picturefill seems to break imagesLoaded on browsers with native support for srcset. Let's say I have an image likeWe don't use
srchere to avoid loading two images.Then we use use picturefill for browsers that don't support
srcsetnatively.In both browsers with and without native support (thanks to picturefill) the right image is loaded, but imagesLoaded reports the image broken on browsers with native support (resulting in not being able to fade the image in smoothly when loaded)
Check out this reduced test case on latest Firefox (v.35: working) and Chrome (v.40: broken):
http://codepen.io/superstructure-net/pen/EaWvZv/
Any ideas? Thx!
The text was updated successfully, but these errors were encountered: