Add lazy loading

src/docs/AlbumsPreview/AlbumsPreview.svelte

@@ -9,7 +9,10 @@
       images: [
         'https://cdn.pixabay.com/photo/2017/04/09/09/56/avenue-2215317_1280.jpg',
         'https://cdn.pixabay.com/photo/2017/11/12/13/37/forest-2942477_1280.jpg',
-        'https://cdn.pixabay.com/photo/2016/08/11/23/55/trees-1587301_1280.jpg'
+        'https://cdn.pixabay.com/photo/2016/08/11/23/55/trees-1587301_1280.jpg',
+        'https://cdn.pixabay.com/photo/2016/08/16/19/09/forest-1598756_1280.jpg',
+        'https://cdn.pixabay.com/photo/2016/11/29/07/12/forest-1868028_1280.jpg',
+        'https://cdn.pixabay.com/photo/2015/03/26/09/45/woods-690257_1280.jpg'
       ]
     },
     birds: {
@@ -50,12 +53,17 @@
       <Carousel
         let:showPrevPage
         let:showNextPage
+        let:loaded
       >
         <div slot="prev" class="album-arrow album-arrow-prev" on:click={showPrevPage}>
           <i />
         </div>
         {#each album.images as imageSrc, imageIndex (imageSrc)}
-          <Image src={imageSrc} alt={album.title} />
+          <Image
+            src={imageSrc}
+            alt={album.title}
+            loaded={loaded.includes(imageIndex)}
+          />
         {/each}
         <div slot="next" class="album-arrow album-arrow-next" on:click={showNextPage}>
           <i />

src/docs/AlbumsPreview/Image.svelte

@@ -1,10 +1,13 @@
 <script>
   export let src
   export let alt
+  export let loaded
 </script>
 
 <div class="image-container">
-  <img {src} {alt} />
+  {#if loaded}
+    <img {src} {alt} />
+  {/if}
 </div>
 
 <style>

src/docs/Layouts/Main.svelte

@@ -17,7 +17,7 @@
 }
 @media screen and (min-width: 0px) {
   .docs__main-layout__content-inner-container {
-    width: 100%;
+    width: 95%;
   }
 }
 @media screen and (min-width: 768px) {
@@ -35,4 +35,4 @@
     width: 50%;
   }
 }
-</style>
+</style>