Skip to content

Instantly share code, notes, and snippets.

@gka gka/App.svelte
Last active Mar 6, 2019

Embed
What would you like to do?
svelte 3 lazyload example
<h1>lazyload example</h1>
{#each [0,1,2,3,4,5,6,7,8,9] as i}
<p>Scroll down to load the images. Quo et qui laboriosam rerum. Animi et quia consequuntur quas sit eaque molestias. Accusamus voluptate nulla eligendi. Dolores labore ea asperiores ut voluptas dolorem. Cupiditate in enim quibusdam. Quas quae aliquam sed repellat laboriosam inventore est.</p>
<img alt="random image" use:lazyload src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAABCAQAAABeK7cBAAAAC0lEQVR42mNkAAIAAAoAAv/lxKUAAAAASUVORK5CYII=" data-src="https://picsum.photos/500/300/?image={i}" />
{/each}
<script>
import { lazyload } from './lazyload.js';
</script>
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
const img = entry.target;
if (img.dataset.src && entry.intersectionRatio !== 0) {
img.setAttribute('src', img.dataset.src);
delete img.dataset.src;
}
})
}, { rootMargin: '-100px' });
export function lazyload(node) {
observer.observe(node);
return {
destroy() {
observer.unobserve(node);
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.