Applying lazy-loading on div element backgrounds

cms/templates/partials/course-carousel.html

@@ -1,5 +1,5 @@
 {% load static wagtailcore_tags wagtailimages_tags %}
-<div id="courseLineup" class="course-in-program">
+<div id="courseLineup" class="course-in-program lazy-load-div" >
   <div class="container">
     <div class="head">
       <h1>{{ page.heading }}</h1>

cms/templates/partials/faculty-carousel.html

@@ -1,5 +1,5 @@
 {% load wagtailcore_tags image_version_url %}
-<div id="faculty" class="faculty-block">
+<div id="faculty" class="faculty-block lazy-load-div">
   <div class="container">
     <div class="head">
       <h1>{{ page.heading }}</h1>

cms/templates/partials/for-teams.html

@@ -1,5 +1,5 @@
 {% load static wagtailimages_tags image_version_url %}
-<div id="forTeams" class="for-teams-block {% if page.dark_theme %} dark-theme {% endif %}">
+<div id="forTeams" class="for-teams-block {% if page.dark_theme %} dark-theme {% endif %} lazy-load-div">
   <div class="container">
     <div class="row">
       <div class="col-lg-7 {% if page.switch_layout %}order-2{% endif %}">

cms/templates/partials/image-carousel.html

@@ -1,5 +1,5 @@
 {% load static image_version_url %}
-<div class="companies-trust-block">
+<div class="companies-trust-block lazy-load-div">
     <div class="container">
         <h1>{{ page.title }}</h1>
         <div class="logos-slider">

cms/templates/partials/testimonial-carousel.html

@@ -1,5 +1,5 @@
 {% load image_version_url wagtailcore_tags %}
-<div id="testimonials" class="learners-block">
+<div id="testimonials" class="learners-block lazy-load-div">
   <div class="container">
     <div class="head">
       <h1>{{ page.heading }}</h1>

cms/templates/partials/text-section.html

@@ -1,5 +1,5 @@
 {% load static wagtailimages_tags wagtailcore_tags %}
-<div id="textSection" class="text-block {% if page.dark_theme %} dark-theme {% endif %}">
+<div id="textSection" class="text-block {% if page.dark_theme %} dark-theme {% endif %} lazy-load-div">
   <div class="container">
     <div class="row justify-content-center">
       <div class="col-lg-10">

courses/templates/subscription.html

@@ -1,4 +1,4 @@
-<div class="posted-block">
+<div class="posted-block lazy-load-div">
     <div class="container">
         <h1>WANT TO LEARN ABOUT NEW COURSES FROM {{ site_name }}?</h1>
         <!--[if lte IE 8]>

mitxpro/templates/base.html

@@ -76,5 +76,28 @@
       });
     </script>
     {% endif %}
+    <script type="text/javascript">
+      /*
+          This script helps in loading the div backgrounds lazily since div element doesn't support "loading='lazy'" attr.
+          It adds intersection observer on all those div elements which specify "lazy-load-div" in their classes.
+          Upon entering the viewport, specified css class with name "lazy-background" having "background-image" attribute
+          is added into the ClassList of the div element which then loads the background.
+       */
+      document.addEventListener("DOMContentLoaded", function () {
+        const lazyBackgrounds = document.querySelectorAll(".lazy-load-div");
+        let lazyBackgroundObserver = new IntersectionObserver(function (entries, observer) {
+          entries.forEach(function (entry) {
+            if (entry.isIntersecting) {
+              entry.target.classList.add("lazy-background");
+              lazyBackgroundObserver.unobserve(entry.target);
+            }
+          });
+        });
+
+        lazyBackgrounds.forEach(function (lazyBackground) {
+          lazyBackgroundObserver.observe(lazyBackground);
+        });
+      });
+    </script>
   </body>
 </html>

static/scss/catalog/keep-me-posted.scss

@@ -2,7 +2,7 @@
 .posted-block {
   width: 100%;
   padding: 75px 0;
-  background: url('#{$static-path}/images/bg-contact.jpg') repeat-x 50% 50%;
+  background: repeat-x 50% 50%;
   min-height: 200px;
   background-size: cover;
   position: relative;
@@ -140,6 +140,10 @@
   }
 }
 
+.posted-block.lazy-background {
+  background-image: url('#{$static-path}/images/bg-contact.jpg');
+}
+
 .submitted-message {
   margin-left: 200px;
   color: white;

static/scss/detail/companies-trust.scss

@@ -2,7 +2,7 @@
 
 .companies-trust-block {
   padding: 90px 0 80px;
-  background: white url('#{$static-path}/images/countries-trust-bg.png') repeat-x 0 0;
+  background: white repeat-x 0 0;
   position: relative;
   text-align: center;
 
@@ -17,6 +17,10 @@
   }
 }
 
+.companies-trust-block.lazy-background {
+  background-image: url('#{$static-path}/images/countries-trust-bg.png');
+}
+
 .logos-slider {
 
   .img-holder {

static/scss/detail/courses-in-program.scss

@@ -2,7 +2,7 @@
 .course-in-program {
   width: 100%;
   padding: 100px 0 50px;
-  background: white url("#{$static-path}/images/course-carousel-bg.jpg") no-repeat 50% 50%;
+  background: white no-repeat 50% 50%;
   min-height: 400px;
   overflow: hidden;
   position: relative;
@@ -49,6 +49,10 @@
   }
 }
 
+.course-in-program.lazy-background {
+  background-image: url("#{$static-path}/images/course-carousel-bg.jpg");
+}
+
 .course-slider {
   position: relative;
   margin: 0 -15px 50px;

static/scss/detail/faculty.scss

@@ -2,7 +2,7 @@
 .faculty-block {
   width: 100%;
   padding: 100px 0 50px;
-  background: black url("#{$static-path}/images/faculty-bg.jpg") no-repeat 50% 0;
+  background: black no-repeat 50% 0;
   min-height: 400px;
   overflow: hidden;
   position: relative;
@@ -29,6 +29,10 @@
   }
 }
 
+.faculty-block.lazy-background {
+  background-image: url("#{$static-path}/images/faculty-bg.jpg");
+}
+
 .faculty-slider {
   position: relative;
   margin: 0 -15px;

static/scss/detail/for-teams.scss

@@ -2,7 +2,7 @@
 .for-teams-block {
   width: 100%;
   padding: 100px 0 50px;
-  background: white url("#{$static-path}/images/transparent-pixels-bg.png") repeat-x 0 100%;
+  background: white repeat-x 0 100%;
   min-height: 400px;
   overflow: hidden;
   position: relative;
@@ -83,6 +83,10 @@
   }
 }
 
+.for-teams-block.lazy-background {
+  background-image: url("#{$static-path}/images/transparent-pixels-bg.png");
+}
+
 // Dark theme
 .for-teams-block.dark-theme {
   background: $darker-grey-bg url("#{$static-path}/images/transparent-pixels-bg.png") repeat-x 0 100%;

static/scss/detail/testimonial-carousel.scss

@@ -1,7 +1,7 @@
 // sass-lint:disable mixins-before-declarations
 .learners-block {
   padding: 100px 0 50px;
-  background: white url("#{$static-path}/images/testimonial-carousel-bg.jpg") no-repeat 50% 0;
+  background: white no-repeat 50% 0;
   min-height: 400px;
   overflow: hidden;
   position: relative;
@@ -41,6 +41,10 @@
   }
 }
 
+.learners-block.lazy-background {
+  background-image: url("#{$static-path}/images/testimonial-carousel-bg.jpg");
+}
+
 .learners-slider {
   position: relative;
   margin: 0 -15px;

static/scss/detail/text-section.scss

@@ -2,7 +2,7 @@
 .text-block {
   width: 100%;
   padding: 100px 0 50px;
-  background: white url("#{$static-path}/images/transparent-pixels-bg.png") repeat-x 0 100%;
+  background: white repeat-x 0 100%;
   min-height: 400px;
   overflow: hidden;
   position: relative;
@@ -31,6 +31,10 @@
   }
 }
 
+.text-block.lazy-background {
+  background-image: url("#{$static-path}/images/transparent-pixels-bg.png");
+}
+
 // Dark theme
 .text-block.dark-theme {
   background: $darker-grey-bg url("#{$static-path}/images/transparent-pixels-bg.png") repeat-x 0 100%;