---
layout: layout.html
title: Islands with Import Maps
showImagePlugin: true
---
<h1><a href="/">is-land</a> for image loading</h1>

<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>&lt;noscript&gt;</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>&lt;template&gt;</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>