TF-2160 Use loading attribute replace IntersectionObserver
(cherry picked from commit 88362cab421f0962dc0103bd165d70850668043e)
This commit is contained in:
@@ -61,40 +61,6 @@ 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 // 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;
|
||||
img.removeAttribute("data-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 '''
|
||||
|
||||
@@ -4,7 +4,6 @@ import 'dart:math' as math;
|
||||
|
||||
import 'package:core/presentation/extensions/color_extension.dart';
|
||||
import 'package:core/presentation/utils/html_transformer/html_template.dart';
|
||||
import 'package:core/presentation/utils/html_transformer/html_utils.dart';
|
||||
import 'package:core/presentation/views/html_viewer/html_viewer_controller_for_web.dart';
|
||||
import 'package:core/utils/app_logger.dart';
|
||||
import 'package:flutter/cupertino.dart';
|
||||
@@ -171,7 +170,7 @@ class _HtmlContentViewerOnWebState extends State<HtmlContentViewerOnWeb> {
|
||||
minHeight: minHeight,
|
||||
minWidth: minWidth,
|
||||
styleCSS: tooltipLinkCss,
|
||||
javaScripts: webViewActionScripts + scriptsDisableZoom + HtmlUtils.scriptLazyLoadImage,
|
||||
javaScripts: webViewActionScripts + scriptsDisableZoom,
|
||||
direction: widget.direction);
|
||||
|
||||
return htmlTemplate;
|
||||
|
||||
@@ -68,7 +68,6 @@ class _HtmlContentViewState extends State<HtmlContentViewer> {
|
||||
_htmlData = generateHtml(
|
||||
widget.contentHtml,
|
||||
direction: widget.direction,
|
||||
javaScripts: HtmlUtils.scriptLazyLoadImage
|
||||
);
|
||||
}
|
||||
|
||||
@@ -81,7 +80,6 @@ class _HtmlContentViewState extends State<HtmlContentViewer> {
|
||||
_htmlData = generateHtml(
|
||||
widget.contentHtml,
|
||||
direction: widget.direction,
|
||||
javaScripts: HtmlUtils.scriptLazyLoadImage
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user