lazy-svelte-image 1.1.0 → 1.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
<script>import { onMount } from "svelte";
|
|
2
2
|
export let src;
|
|
3
|
+
export let alt = "";
|
|
3
4
|
export let backgroundColor = "#c2c2c224";
|
|
4
5
|
export let disabeLoader = false;
|
|
5
6
|
export let disableBroken = false;
|
|
6
7
|
let loaded = false;
|
|
7
8
|
let failed = false;
|
|
8
|
-
let loading =
|
|
9
|
+
let loading = true;
|
|
9
10
|
let icons = {
|
|
10
11
|
loader: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" width="80" height="80" style="shape-rendering: auto; display: block; background: transparent;" xmlns:xlink="http://www.w3.org/1999/xlink"><g><circle stroke-dasharray="113.09733552923255 39.69911184307752" r="24" stroke-width="4" stroke="#629aa9" fill="none" cy="50" cx="50"><animateTransform keyTimes="0;1" values="0 50 50;360 50 50" dur="1s" repeatCount="indefinite" type="rotate" attributeName="transform"></animateTransform></circle><g></g></g><!-- [ldio] generated by https://loading.io --></svg>',
|
|
11
12
|
broken: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path d="M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L489.3 358.2l90.5-90.5c56.5-56.5 56.5-148 0-204.5c-50-50-128.8-56.5-186.3-15.4l-1.6 1.1c-14.4 10.3-17.7 30.3-7.4 44.6s30.3 17.7 44.6 7.4l1.6-1.1c32.1-22.9 76-19.3 103.8 8.6c31.5 31.5 31.5 82.5 0 114l-96 96-31.9-25C430.9 239.6 420.1 175.1 377 132c-52.2-52.3-134.5-56.2-191.3-11.7L38.8 5.1zM239 162c30.1-14.9 67.7-9.9 92.8 15.3c20 20 27.5 48.3 21.7 74.5L239 162zM116.6 187.9L60.2 244.3c-56.5 56.5-56.5 148 0 204.5c50 50 128.8 56.5 186.3 15.4l1.6-1.1c14.4-10.3 17.7-30.3 7.4-44.6s-30.3-17.7-44.6-7.4l-1.6 1.1c-32.1 22.9-76 19.3-103.8-8.6C74 372 74 321 105.5 289.5l61.8-61.8-50.6-39.9zM220.9 270c-2.1 39.8 12.2 80.1 42.2 110c38.9 38.9 94.4 51 143.6 36.3L220.9 270z"/></svg>'
|
|
@@ -26,7 +27,7 @@ onMount(() => {
|
|
|
26
27
|
</script>
|
|
27
28
|
|
|
28
29
|
{#if loaded}
|
|
29
|
-
<img {...$$restProps} {src} alt
|
|
30
|
+
<img {...$$restProps} {src} {alt} />
|
|
30
31
|
{:else if failed}
|
|
31
32
|
<div class="image-placeholder" style="--background-color: {backgroundColor}">
|
|
32
33
|
{#if !disableBroken}
|
|
@@ -63,6 +64,7 @@ onMount(() => {
|
|
|
63
64
|
text-align: center;
|
|
64
65
|
}
|
|
65
66
|
.image-placeholder {
|
|
67
|
+
padding: 16px;
|
|
66
68
|
display: flex;
|
|
67
69
|
justify-content: center;
|
|
68
70
|
width: 100%;
|