A few weeks ago, I finally got around to looking at the official plugins supports and built a little demo that integrated the Intl spec with the Mask plugin. (You can read the post here: ). Today, I thought I'd take a look at another plugin, . Alpine.js Integrating Intl with Alpine.js Mask Intersect What Is It? The Intersect plugin is a wrapper for the . This is a pretty cool web platform API that lets you monitor when DOM elements come into the visible part of a web browser. I first dug into this a few months ago in an article I wrote for Cloudinary, .” Intersection Observer API "Automatically Loading High-Quality Images with Cloudinary and IntersectionObserver In that article, I show how to use the API to determine when an image has become visible and swap out a lower-quality version of an image with a higher-quality one. I thought this was a pretty cool idea, as folks without JavaScript still get the images, albeit more lightweight ones, and those with JavaScript get nicer images, but only when necessary. The Intersect plugin looks to make using the API even simpler. By adding to anything in the DOM (within an Alpine.js application), you can assign logic to fire when the item becomes visible. Here's an example: x-intersect <div x-data="myApp">
   (imagine lots of DOM crap that adds a lot of white space...)
   <div x-intersect="visible = true">
   When I'm visible, the variable, visible, will be set to true.
   </div>
</div> Here's a live example where I've placed on an image tag. When you scroll down to it, you'll get an alert. If you scroll up and back, you'll get the alert again. This is done like so: x-intersect <img x-intersect="meow" src="https://placekitten.com/500/500"> With the Alpine.js code being just: document.addEventListener('alpine:init', () => {
  Alpine.data('app', () => ({
        meow() {
            alert('Meow!');
        }
  }))
}); Here's the demo itself (and as an aside, Edge started acting up with the scrolling in the result pane for me, but I couldn't reproduce it anywhere else, so if you have an issue with the demo, maybe quickly try Chrome/Safari/etc). do https://codepen.io/cfjedimaster/pen/eYbyJMX?embedable=true Right away, you probably ask, is there a way to handle intersects but only care about the event of it being visible? Turns out that's pretty easy. There are five different you can use to tweak the behavior, with one being . initial modifiers .once To make that modification to the previous demo, it's just a quick addition: <img x-intersect.once="meow" src="https://placekitten.com/500/500"> If you run this demo, you should only get the alert once. https://codepen.io/cfjedimaster/pen/mdapVaw?embedable=true A Real Demo Given how easy it is to use, I thought I'd modify the demo I built for my and give it an Alpine.js twist. Cloudinary blog post I'll start with a demo that make use of this feature. In the initial version, Alpine will define a set of images and render them to the DOM, but first, it will make use of Cloudinary's APIs to serve it via its CDN, giving us some free automatic performance boosts. Here's the HTML: doesn't <div x-data="app">
    <div id="images">
        <template x-for="image in images">
            <p><img :src="image"></p>
        </template>
    </div>
</div> And the JavaScript behind it. I trimmed the list of images to make the code listing a bit shorter. . document.addEventListener('alpine:init', () => {
  Alpine.data('app', () => ({
        init() {
            this.images = this.initialImages.map(i => this.cloudinize(i));
        },
        images:[],
        initialImages: [
            "https://static.raymondcamden.com/images/2023/04/300_1.jpg",
            "https://static.raymondcamden.com/images/2023/04/700.jpg"
        ],
        cloudinize(u) {
            return 'https://res.cloudinary.com/raymondcamden/image/fetch/' + u;
        },
  }))
}); I want to apologize for the name of the method. That's literally one of the worst names for a method ever. But I like it. You can view this initial version below: cloudinize https://codepen.io/cfjedimaster/pen/vYvWRLM?embedable=true Alright, so now I want to modify this in two ways. First, I want to use lower-quality images by default. This will reduce the initial load for all those images. This is done via a very small change to : cloudinize cloudinize(u) {
    return 'https://res.cloudinary.com/raymondcamden/image/fetch/q_30/' + u;
}, Basically, by adding to the URL, I've asked Cloudinary to reduce the quality down to 30%. q_30 Next, I modify my HTML to handle the intersection: <template x-for="(image,idx) in images" :key="idx">
    <p x-intersect.once="swapImage(idx)"><img :src="image"></p>
</template> In the code above, I'm calling and passing the current loop index. My data is an array, so I don't care about the actual value in the loop, just the index. Also, notice - it only makes sense to 'upgrade' the image once. swapImage .once Here's the JavaScript: swapImage(x) {
    this.images[x] = this.images[x].replace('q_30', 'q_90');
} Since Cloudinary lets you swap out different operations by just changing the URL, this online line handles swapping out the 30% quality version with the 90% one. Here's a complete demo. You may want to open it in a new tab and check your devtools to see the new images load as you scroll. https://codepen.io/cfjedimaster/pen/xxmPWVz?embedable=true Let me know what you think, and definitely check both the for more about the plugin and the for details on the API as a whole. docs MDN documentation Also published . here

Creating a Marvel 'Guess The Decade' Game Using Alpine.js

Crafting Interactive QR Code Web Components: Integration and Customization

My Blog

Buy Me a Coffee

Read My Stories

Too Long; Didn't Read

Make resilience your competitive advantage

The Alpine.js Intersect Plugin: Enhancing Web Interactivity and Image Loading

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

A Cat-Centric Guide to Using Web Components in Alpine.js

Creating a Marvel 'Guess The Decade' Game Using Alpine.js

Downloading Data as a File with Alpine.js

How to Create a Blackjack Game With Alpine.js and the Deck of Cards API

How to Read Image Sizes and Dimensions with Alpine.js

A Cat-Centric Guide to Using Web Components in Alpine.js

Creating a Marvel 'Guess The Decade' Game Using Alpine.js

Downloading Data as a File with Alpine.js

How to Create a Blackjack Game With Alpine.js and the Deck of Cards API

How to Read Image Sizes and Dimensions with Alpine.js

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps