diff --git a/frappe/public/scss/website/website_image.scss b/frappe/public/scss/website/website_image.scss index c7a6992140..e237fc0a54 100644 --- a/frappe/public/scss/website/website_image.scss +++ b/frappe/public/scss/website/website_image.scss @@ -18,12 +18,6 @@ img { background: $light; } -.website-image-lazy { - min-height: 200px; - height: 100%; - background-color: $light; -} - @mixin website-image { display: inline-block; object-fit: contain; diff --git a/frappe/website/js/website.js b/frappe/website/js/website.js index da3c6cc299..7fdfa79635 100644 --- a/frappe/website/js/website.js +++ b/frappe/website/js/website.js @@ -371,50 +371,6 @@ $.extend(frappe, { $($heading).append($a); }); }, - setup_lazy_images: function () { - // Use IntersectionObserver to only load images that are visible in the viewport - // Fallback for browsers that don't support it - // To use this feature, instead of adding an img tag, add - //
- - const allowed_attributes = ["src", "srcset", "alt", "title", "width", "height"]; - - function replace_with_image(target) { - const $target = $(target); - const attrs = $target.data(); - const data_string = Object.keys(attrs) - .filter((key) => allowed_attributes.includes(key)) - .map((key) => `${key}="${attrs[key]}"`) - .join(" "); - $target.replaceWith(``); - } - - if (!window.IntersectionObserver) { - $(".website-image-lazy").each((_, el) => { - replace_with_image(el); - }); - return; - } - - const io = new IntersectionObserver( - (entries) => { - entries.forEach((e) => { - if (e.intersectionRatio > 0) { - io.unobserve(e.target); - replace_with_image(e.target); - } - }); - }, - { - threshold: [0, 0.2, 0.4, 0.6], - } - ); - - $(".website-image-lazy").each((_, el) => { - // Start observing an element - io.observe(el); - }); - }, show_language_picker() { if (frappe.session.user === "Guest" && window.show_language_picker) { frappe @@ -665,7 +621,6 @@ $(document).ready(function () { } frappe.render_user(); - frappe.setup_lazy_images(); $(document).trigger("page-change"); });