diff --git a/src/lib/ImageGallery.svelte b/src/lib/ImageGallery.svelte
index 3d5fb55..df14c64 100644
--- a/src/lib/ImageGallery.svelte
+++ b/src/lib/ImageGallery.svelte
@@ -80,8 +80,6 @@
   let resizeSlideWrapperObserver: ResizeObserver;
   let resizeThumbnailWrapperObserver: ResizeObserver;
   let thumbnailMouseOverTimer: number | null = null;
-  let lazyLoaded: boolean[] = [];
-  let imageLoaded: boolean[] = [];
 
   /** keep track of mouse vs keyboard usage for a11y */
   let currentlyUsingMouseOrKeyboard: MouseOrKeyboard = 'mouse';
@@ -269,22 +267,6 @@
     }
   };
 
-  $: handleImageLoad = (customEvent: {
-    detail: {
-      index: number;
-      event: Event;
-    };
-  }) => {
-    const index = customEvent.detail.index;
-    const event = customEvent.detail.event;
-    const imageExists = imageLoaded[index];
-    if (!imageExists) {
-      imageLoaded[index] = true; // prevent from call again
-      // image just loaded, call onImageLoad
-      dispatch('imageload', { index, event });
-    }
-  };
-
   $: handleImageError = (customEvent: {
     detail: {
       index: number;
@@ -395,10 +377,6 @@
       }
     }
   };
-
-  $: onLazyLoad = (event: { detail: number }) => {
-    lazyLoaded[event.detail] = true;
-  };
 </script>
 
 <div
@@ -432,7 +410,6 @@
         {stopPropagation}
         {indexSeparator}
         {lazyLoad}
-        {lazyLoaded}
         {swipeThreshold}
         {flickThreshold}
         {transitionStyle}
@@ -445,8 +422,6 @@
         }}
         on:playtoggle={togglePlay}
         on:fullscreentoggle={toggleFullscreen}
-        on:lazyload={onLazyLoad}
-        on:imageload={handleImageLoad}
         on:imageerror={handleImageError}
         on:click
       />
@@ -496,7 +471,6 @@
         {stopPropagation}
         {indexSeparator}
         {lazyLoad}
-        {lazyLoaded}
         {swipeThreshold}
         {flickThreshold}
         {transitionStyle}
@@ -509,8 +483,6 @@
         }}
         on:playtoggle={togglePlay}
         on:fullscreentoggle={toggleFullscreen}
-        on:lazyload={onLazyLoad}
-        on:imageload={handleImageLoad}
         on:imageerror={handleImageError}
         on:click
       />
diff --git a/src/lib/SlideWrapper.svelte b/src/lib/SlideWrapper.svelte
index 63c38e1..8bf8d41 100644
--- a/src/lib/SlideWrapper.svelte
+++ b/src/lib/SlideWrapper.svelte
@@ -31,7 +31,6 @@
   export let galleryWidth: number;
   export let indexSeparator: string;
   export let lazyLoad: boolean;
-  export let lazyLoaded: boolean[];
   export let swipeThreshold: number;
   export let flickThreshold: number;
   export let transitionStyle: string; // how should transitions be made? CSS, i.e. 'transform 450ms ease-out'
@@ -47,6 +46,29 @@
   $: canSlideLeft = infinite || (isRTL ? canSlideNext : canSlidePrevious);
   $: canSlideRight = infinite || (isRTL ? canSlidePrevious : canSlideNext);
 
+  let imageLoaded: boolean[] = [];
+  let lazyLoaded: boolean[] = [];
+
+  // reset load flags when items change
+  $: {
+    items = items;
+    lazyLoaded = [];
+    imageLoaded = [];
+  }
+
+  function onLazyLoad(index: number) {
+    lazyLoaded[index] = true;
+  }
+
+  function handleImageLoad(index: number, event: Event) {
+    const imageExists = imageLoaded[index];
+    if (!imageExists) {
+      imageLoaded[index] = true; // prevent from call again
+      // image just loaded, call onImageLoad
+      dispatch('imageload', { index, event });
+    }
+  }
+
   // the element of this wrapper, useful to observe resize changes
   let elem: HTMLElement;
 
@@ -129,7 +151,7 @@
   $: showItems = items.map((_, index) => {
     const showItem = !lazyLoad || !!alignmentClasses[index] || lazyLoaded[index];
     if (showItem && lazyLoad && !lazyLoaded[index]) {
-      dispatch('lazyload', index);
+      onLazyLoad(index);
     }
     return showItem;
   });
@@ -197,7 +219,7 @@
           showItem={showItems[index]}
           {item}
           isFullscreen={false}
-          on:imageload={(event) => dispatch('imageload', { index, event })}
+          on:imageload={(event) => handleImageLoad(index, event)}
           on:imageerror={(event) => dispatch('imageerror', { index, event })}
           on:click
         />