-
-
Notifications
You must be signed in to change notification settings - Fork 17
/
demo-image-loading.html
52 lines (43 loc) · 1.91 KB
/
demo-image-loading.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
---
layout: layout.html
title: Islands with Import Maps
showImagePlugin: true
---
<h1><a href="/">is-land</a> for image loading</h1>
<style>
img[is-land--img-skeleton] {
background-color: #eee;
}
</style>
<h4>Experimental: pass in a CSS selector to progressively enhance other elements (<code>fallback</code>)</h4>
<p>This example uses <code>on:interaction</code>. You will need to interact with the island for the images to load. Note the aspect ratio before/after is preserved via the width/height attributes on the img.</p>
<p>Uses <code><noscript></code> for No-JS friendly images.</p>
<is-land on:interaction>
<form>
<button type="button">Hydrate the island</button>
</form>
<noscript data-island-img-skeleton>
<img src="lib/logo-bg.svg" loading="lazy" width="200" height="200">
<img src="lib/logo-bg.svg" loading="lazy" width="200" height="200">
<img src="lib/logo-bg.svg" loading="lazy" width="200" height="200">
<img src="lib/logo-bg.svg" loading="lazy" width="200" height="200">
<img src="lib/logo-bg.svg" loading="lazy" width="200" height="200">
<img src="lib/logo-bg.svg" loading="lazy" width="200" height="200">
<img src="lib/logo-bg.svg" loading="lazy" width="200" height="200">
</noscript>
</is-land>
<p>Uses <code><template></code> for JS-only images.</p>
<is-land on:interaction>
<form>
<button type="button">Hydrate the island</button>
</form>
<template data-island-img-skeleton>
<img src="lib/logo-bg.svg" loading="lazy" width="200" height="200">
<img src="lib/logo-bg.svg" loading="lazy" width="200" height="200">
<img src="lib/logo-bg.svg" loading="lazy" width="200" height="200">
<img src="lib/logo-bg.svg" loading="lazy" width="200" height="200">
<img src="lib/logo-bg.svg" loading="lazy" width="200" height="200">
<img src="lib/logo-bg.svg" loading="lazy" width="200" height="200">
<img src="lib/logo-bg.svg" loading="lazy" width="200" height="200">
</template>
</is-land>