Removing Lazy load div changes

mitodl · Jan 27, 2021 · 5c18d79 · 5c18d79
1 parent 326b780
commit 5c18d79
Show file tree

Hide file tree

Showing 9 changed files with 8 additions and 50 deletions.
diff --git a/cms/templates/partials/course-carousel.html b/cms/templates/partials/course-carousel.html
@@ -1,5 +1,5 @@
 {% load static wagtailcore_tags wagtailimages_tags %}
-<div id="courseLineup" class="course-in-program lazy-load-div" >
+<div id="courseLineup" class="course-in-program">
   <div class="container">
     <div class="head">
       <h1>{{ page.heading }}</h1>

diff --git a/cms/templates/partials/faculty-carousel.html b/cms/templates/partials/faculty-carousel.html
@@ -1,6 +1,5 @@
 {% load wagtailcore_tags image_version_url %}
-
-<div id="faculty" class="faculty-block lazy-load-div">
+<div id="faculty" class="faculty-block">
   <div class="container">
     <div class="head">
       <h1>{{ page.heading }}</h1>

diff --git a/cms/templates/partials/testimonial-carousel.html b/cms/templates/partials/testimonial-carousel.html
@@ -1,5 +1,5 @@
 {% load image_version_url wagtailcore_tags %}
-<div id="testimonials" class="learners-block lazy-load-div">
+<div id="testimonials" class="learners-block">
   <div class="container">
     <div class="head">
       <h1>{{ page.heading }}</h1>

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

diff --git a/mitxpro/templates/base.html b/mitxpro/templates/base.html
@@ -78,30 +78,5 @@
       });
     </script>
     {% endif %}
-      <script type="text/javascript">
-          /*
-          This script helps in loading the div backgrounds lazily since, div element doesn't support "loading='lazy'" attr.
-          This script adds intersection observer on all those div elements which specify "lazy-load-div" in their classes.
-          Upon entering the viewport, specified scss class with name "lazy-background" is added into the ClassList of element
-          which then loads the background.
-          */
-          document.addEventListener("DOMContentLoaded", function () {
-              var lazyBackgrounds = [].slice.call(document.querySelectorAll(".lazy-load-div"));
-              if ("IntersectionObserver" in window && "IntersectionObserverEntry" in window && "intersectionRatio" in window.IntersectionObserverEntry.prototype) {
-                  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>
diff --git a/static/scss/catalog/keep-me-posted.scss b/static/scss/catalog/keep-me-posted.scss
@@ -2,7 +2,7 @@
 .posted-block {
   width: 100%;
   padding: 75px 0;
-  background: repeat-x 50% 50%;
+  background: url('#{$static-path}/images/bg-contact.jpg') repeat-x 50% 50%;
   min-height: 200px;
   background-size: cover;
   position: relative;
@@ -140,10 +140,6 @@
   }
 }
 
-.posted-block.lazy-background {
-  background-image: url('#{$static-path}/images/bg-contact.jpg');
-}
-
 .submitted-message {
   margin-left: 200px;
   color: white;

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

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

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