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
Background Images Request #19
Comments
I think that's a good idea, but it's not currently in yall.js. It's something I've been thinking of, but the implementation is definitely not straight forward when you start taking things like media queries into account. I can add this to the backlog, but I'm definitely not looking to get it into yall.js super soon. |
Hi, @whittyskitty. I've implemented this feature in a pre-release version of yall.js: https://raw.githubusercontent.com/malchata/yall.js/master/dist/yall-2.1.0.min.js For the usage pattern, check out the test HTML file in the repo. |
Hi malchata, thanx for this background feauture. Is there any reason why this can't work with data attributes just like you with regular images? |
Because CSS. :) The short explanation: Devices, their screens, and all the different assets we might need to load for them would make it too onerous to implement in the way you've described while not breaking anything. Relying on CSS is much more resilient, because its behavior is predictable. The long explanation: I could go with the pattern you specified and have users specify image(s) in a The path I've chosen is to hook elements users want to lazy load background images for into yall.js by way of a .full-bleed-section-masthead {
width: 100%;
height: 20rem;
} In your markup, you'll attach a class of .full-bleed-section-masthead.lazy-bg-loaded {
background-image: url("/images/my-image-small-1x.jpg");
} Of course, this is the simplest example. Let's assume this image is mobile-first styling on a 1x DPR screen. We'll need to add the following (simplified) rules to make this work a bit better: @media (min-resolution: 192dpi) {
.full-bleed-section-masthead.lazy-bg-loaded {
background-image: url("/images/my-image-small-2x.jpg");
}
}
/* 600px and above */
@media (min-width: 37.5em) {
.full-bleed-section-masthead.lazy-bg-loaded {
background-image: url("/images/my-image-medium-1x.jpg");
}
}
/* 600px and above + 2x DPR */
@media (min-width: 37.5em) and (min-resolution: 192dpi) {
.full-bleed-section-masthead.lazy-bg-loaded {
background-image: url("/images/my-image-medium-2x.jpg");
}
}
/* 960px and above */
@media (min-width: 60em) {
.full-bleed-section-masthead.lazy-bg-loaded {
background-image: url("/images/my-image-large-1x.jpg");
}
}
/* 960px and above + 2x DPR */
@media (min-width: 60em) and (min-resolution: 192dpi) {
.full-bleed-section-masthead.lazy-bg-loaded {
background-image: url("/images/my-image-large-2x.jpg");
}
} Oh, and what if you're not just lazy-loading a Why does this even work? Because unlike images loaded in HTML browsers speculate when it comes to loading resources in CSS. If the document loads a style sheet with a I hope this helps! |
Thanks for your extensive reply. Learned a lot. |
Hey Malchata,
I followed along with you here: https://developers.google.com/web/fundamentals/performance/lazy-loading-guidance/images-and-video/
Within that article, you had the ability to use lazy loading with Background Images. Is there a way to use that similarly with yall.js?
Thanks
The text was updated successfully, but these errors were encountered: