KevinMidboe/seasoned
1
0
Fork 0
Code Issues 12 Pull Requests 1 Packages Projects Releases 1 Wiki Activity

Add 'is-loaded' class after image intersects viewport

Browse Source
This commit is contained in:
Kevin
2022-01-03 17:50:06 +01:00
parent ac2785abd5
commit 38c3792675
1 changed files with 2 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/MoviesListItem.vue
View File

@@ -2,7 +2,7 @@
<li class="movie-item" :class="{ shortList: shortList }"> <li class="movie-item" :class="{ shortList: shortList }">
<figure class="movie-item__poster"> <figure class="movie-item__poster">
<img <img
class="movie-item__img is-loaded" class="movie-item__img"
ref="poster-image" ref="poster-image"
@click="openMoviePopup(movie.id, movie.type)" @click="openMoviePopup(movie.id, movie.type)"
:alt="posterAltText" :alt="posterAltText"
@@ -92,6 +92,7 @@ export default {
if (entry.isIntersecting && this.observed == false) { if (entry.isIntersecting && this.observed == false) {
const lazyImage = entry.target; const lazyImage = entry.target;
lazyImage.src = lazyImage.dataset.src; lazyImage.src = lazyImage.dataset.src;
lazyImage.className = lazyImage.className + " is-loaded";
this.observed = true; this.observed = true;
} }
}); });