Skip to content

Lazy behavior media query scoping

Mike Byrne edited this page Dec 24, 2021 · 1 revision
<div data-behavior-lazy="myBehavior" data-mybehavior-lazymedia="lg+" data-mybehavior-media="lg+">
  ...
</div>

The myBehavior behavior will now only run init (or import and init) if the current media query is lg+ and the element gets close to being in the viewport. If there is a resize event to a smaller media query, the behavior is not destroyed, it will remain running and so you will likely want to handle this situation with a media query scope (see above).