Reuse placeholder of content is cached

dimsemenov · Jul 25, 2022 · e22bd28 · e22bd28
1 parent 4695d92
commit e22bd28
Showing 1 changed file with 29 additions and 12 deletions.
diff --git a/src/js/slide/content.js b/src/js/slide/content.js
@@ -61,18 +61,26 @@ class Content {
    * @param {boolean=} reload
    */
   load(isLazy, reload) {
-    if (!this.placeholder && this.slide && this.usePlaceholder()) {
-      // use   -based placeholder only for the first slide,
-      // as rendering (even small stretched thumbnail) is an expensive operation
-      const placeholderSrc = this.instance.applyFilters(
-        'placeholderSrc',
-        (this.data.msrc && this.slide.isFirstSlide) ? this.data.msrc : false,
-        this
-      );
-      this.placeholder = new Placeholder(
-        placeholderSrc,
-        this.slide.container
-      );
+    if (this.slide && this.usePlaceholder()) {
+      if (!this.placeholder) {
+        const placeholderSrc = this.instance.applyFilters(
+          'placeholderSrc',
+          // use  image-based placeholder only for the first slide,
+          // as rendering (even small stretched thumbnail) is an expensive operation
+          (this.data.msrc && this.slide.isFirstSlide) ? this.data.msrc : false,
+          this
+        );
+        this.placeholder = new Placeholder(
+          placeholderSrc,
+          this.slide.container
+        );
+      } else {
+        const placeholderEl = this.placeholder.element;
+        // Add placeholder to DOM if it was already created
+        if (placeholderEl && !placeholderEl.parentElement) {
+          this.slide.container.prepend(placeholderEl);
+        }
+      }
     }
 
     if (this.element && !reload) {
@@ -336,6 +344,11 @@ class Content {
 
     this.remove();
 
+    if (this.placeholder) {
+      this.placeholder.destroy();
+      this.placeholder = null;
+    }
+
     if (this.isImageContent() && this.element) {
       this.element.onload = null;
       this.element.onerror = null;
@@ -458,6 +471,10 @@ class Content {
     if (this.element && this.element.parentNode) {
       this.element.remove();
     }
+
+    if (this.placeholder && this.placeholder.element) {
+      this.placeholder.element.remove();
+    }
   }
 
   /**