TF-1961 Add script handle lazy loading image in html

(cherry picked from commit b57c93f47dc7c621e24506818d44b6360a9b9239)
2023-08-16 12:30:49 +07:00
parent 1af33dd20d
commit e2de23fdfd
5 changed files with 52 additions and 8 deletions
@@ -39,6 +39,15 @@ class ImageTransformer extends DomTransformer {
          imageSource: src
        );
        imageElement.attributes['src'] = imageBase64 ?? src;
+      } else if (src.startsWith('https://') || src.startsWith('http://')) {
+        final classAttribute = imageElement.attributes['class'];
+        if (classAttribute != null) {
+          imageElement.attributes['class'] = '$classAttribute lazy-loading';
+        } else {
+          imageElement.attributes['class'] = 'lazy-loading';
+        }
+        imageElement.attributes['data-src'] = src;
+        imageElement.attributes.remove('src');
      }
    }));
  }
@@ -54,10 +54,10 @@ String generateHtml(String content, {
      ''' : ''}
      ${styleCSS ?? ''}
    </style>
-    ${javaScripts ?? ''}
    </head>
    <body ${direction == TextDirection.rtl ? 'dir="rtl"' : ''} style = "overflow-x: hidden">
    <div class="tmail-content">$content</div>
+    ${javaScripts ?? ''}
    </body>
    </html> 
  ''';
@@ -68,6 +68,39 @@ class HtmlUtils {
    }
  ''';

+  static const scriptLazyLoadImage = '''
+    <script type="text/javascript">
+      const lazyImages = document.querySelectorAll("img.lazy-loading");
+      
+      const options = {
+        root: null, // Use the viewport as the root
+        rootMargin: "0px",
+        threshold: 0.1 // Specify the threshold for intersection
+      };
+      
+      const handleIntersection = (entries, observer) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            const img = entry.target;
+            const src = img.getAttribute("data-src");
+      
+            // Replace the placeholder with the actual image source
+            img.src = src;
+      
+            // Stop observing the image
+            observer.unobserve(img);
+          }
+        });
+      };
+      
+      const observer = new IntersectionObserver(handleIntersection, options);
+      
+      lazyImages.forEach((image) => {
+        observer.observe(image);
+      });
+    </script>
+  ''';
+
  static String customCssStyleHtmlEditor({TextDirection direction = TextDirection.ltr}) {
    if (PlatformInfo.isWeb) {
      return '''