Intersection Observer API testing

index.html

<div class="textBlock"><p>Scroll down... <br><br>All the Divs in the viewport will (upon entering the viewport) be assigned a random background color.  <br><br>I can use the Intersection Observer API to detect Viewport entry for any type of element... it can be my pagination approach, for long lists in a single page web app.</p></div>
<div id="wrapper"></div>

intersection-observer-api-testing.markdown

Intersection Observer API testing

A Pen by lsaDevTeam on CodePen.

License.

script.js

$(document).ready(function () {
   
   
   const imageObserver = new IntersectionObserver((entries, imgObserver) => {
      entries.forEach((entry) => {
         if(entry.isIntersecting) {

            const lazyImage = entry.target
            setTimeout(function(){
                  var newClr = '#'+getColor();
                  $(lazyImage).css('background-color', newClr);
                  //console.log(newClr);
            }, 1000)
            
            
         }
      })
   });
   


   
   
   function getColor() {
      var randoColor = Math.floor(Math.random() * 16777215).toString(16);
     
      return Math.floor(Math.random() * 16777215).toString(16);
   }
   for (i = 0; i < 100; i++) {
      $("#wrapper").append(
         '<div class="divBox" id="div' +
            i +
            '" style="background-color: null">' +
            i +
            "</div>"
      );
   }
      // LAZY LOAD IMAGES USING INTERSECTION OBSERVER API -- makes use of /js/lazyload_images.js
      $('.divBox').each(function(cdi, cdival){
         imageObserver.observe(cdival);
      })
   
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

style.css

body, html {
   width: 100%;
   height: 100%;
}

#wrapper {
   width: 50%;
   margin: 0 auto;
   border: 0px solid blue; 
   height: auto;
}

.divBox {
   border: 1px solid red;
   width: 100%; 
   min-height: 100px;
   margin: 10px;
   display: inline-block;
   text-align: center;
   padding-top: 10px;
   padding: 0 10 0 0;
}

.textBlock {
   width: 50%; min-width: 500px; margin: 0 auto; font-size: 1.4em; font-family: arial, helvetica;
}