@minsulaiman/image-watcher v1.0.1
Image Watcher
Track image loading with Alpine.js like a hunter!
Description
This package creates an Alpine.js directive, which one could use to do stuff when images are loaded.
We start off by defining an alpine.js object variable with isLoaded
property set to false
. Then apply the x-image-watcher
custom directive to the <img>
element directly or to a parent element that contains an <img>
element within...
And when the image is loaded, the imageWatcher
associated with it - as an example of our object variable - would have its isLoaded
property set to true
.
An example code for the TALL Stack would be something like this:
<div
x-data="{ imageWatcher: { isLoaded: false } }"
x-image-watcher="imageWatcher"
>
<img
src="{{ asset('images/cool-image.png') }}"
alt="cool image"
>
<span
x-cloak
x-show="imageWatcher.isLoaded"
x-transition
>
The image is loaded! No way!
</span>
<!-- A timed example too! -->
<span
x-data="{ show: false }"
x-effect="
if (imageWatcher.isLoaded) {
setTimeout(() => show = true, 1000);
}
"
x-cloak
x-show="show"
x-transition
>
Wait a second...!
</span>
</div>
Installation
Again, since this is an Alpine.js directive, we need that awesomeness installed first!
Requirements
Steps
Install the package via NPM:
npm install @minsulaiman/image-watcher
Compile your
app.js
after adding an Alpine.js plugin like this:... import Alpine from 'alpinejs'; import imageWatcher from '@minsulaiman/image-watcher'; Alpine.plugin(imageWatcher); Alpine.start(); ...
Development
If you like the package, you know how to pull-request! 🙂
TODOs
- Write Cypress tests! 🙂
Remarks
Please do 🌟 all the packages you rely on, but NOT this one. 😍