Comments (5)
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 data-src
attribute, but that's a problem. What if a CSS image needs to be density-corrected for different screens? What if an image is art-directed? There's just too much that can change. Sure, I could write it this way, but accommodating for all the different possible scenarios would bloat this library significantly, and something could still break. So rather than fight CSS, my approach relies on it.
The path I've chosen is to hook elements users want to lazy load background images for into yall.js by way of a lazy-bg
class. So literally any element that has this class is now something yall.js will start paying attention to (this class name can be overridden with options.lazyBackgroundClass
). Let's say you use yall.js to lazy load a large background image for a full bleed heading on a new section using a class
of full-bleed-section-masthead
(wordy, I know):
.full-bleed-section-masthead {
width: 100%;
height: 20rem;
}
In your markup, you'll attach a class of lazy-bg
to it to signify to yall.js that you want lazy load its background image when it's within range of the viewport (within 200 pixels of the viewport's edge by default, but this can be overridden by options.threshold
). When this happens, yall.js will tag that element with a class of lazy-bg-loaded
(this can be overridden with options. lazyBackgroundLoaded
). From here, you can add some CSS like this:
.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 background-image
resource? There are other resources that accept a url
data type, such as list-style-image
(not that you would ever lazy load list bullet images, but you could).
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 background-image
referenced in it, but the document's CSSOM doesn't include a selector that references that style, the document won't load the image. This gives yall.js the ability to effectively lazy load the resource the way that it does.
I hope this helps!
from yall.js.
Thanks for your extensive reply. Learned a lot.
from yall.js.
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.
from yall.js.
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.
from yall.js.
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?
Like so?
<div class="lazy-bg" data-src="/img/test-1536w.jpg"></div>
from yall.js.
Related Issues (20)
- 2.3.2 not working with IE11
- Missing files in the 3.1.5 npm install HOT 6
- yall doesn't seem to work on iOS HOT 3
- Google Page Speed still asking to defer offscreen images HOT 5
- Broken loop in yallApplyFn
- Images in slideshow not loading correctly in Safari
- Strange error in the latest 3.1.6 version HOT 2
- yall.js as a fallback for native loading="lazy" HOT 3
- 3.1.7 issue in IE11 (with polyfill) HOT 3
- Would you add extensions/libraries facilitating usage of this library? HOT 1
- Lazy loading <video> (autoplay/GIF-like behavior) HOT 1
- Picture element has its image loaded before the users scrolls to it. HOT 2
- Width / Height for <img> in test files
- how to disable on particular page
- Type error when dataset is undefined.
- Usage with Webpack & Babel, for supporting IE11 / not ES6 browsers? HOT 8
- Yall not working on modal window iframe. HOT 1
- Yall with background image css with loop
- Can't find this file ./dist/yall.mjs
- [Feature Request] Detect when video is no longer on screen and provide hook
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from yall.js.