Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 

  • Infinite scrolling with IntersectionObserver API

    @mukesh.tomar
    Recommendations Offline Message

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 600
    Comment on it

    JavaScript is the programming language of HTML and the Web.It plays a very important role in web. Its client side scripting language.JavaScript is also defined as a lightweight, interpreted programming language.
    It is complimentary to and integrated with Java.


    JavaScript is used for many purposes in web as its having many inbuilt functions that is used according to the requirements by the developers.

    Infinite scroll is also a feature of JavaScript that also used in most of the websites that are having many pages data .Infinite scroll helps to load the website fast if the website have very much data in that particular page because infinite scroll loads some amount of data that should be visible and loads the another data whenever user scrolls at the end of the page.

    1. <ul class="listview"></ul>
    2. <span class="polyfill-notice">polyfill</span>
    3. <script>
    4.     if (!('IntersectionObserver' in window))     //IntersectionObserver api function to load content
    5.         document.body.classList.add('polyfill');
    6. </script>
    7.  
    8.  
    9. <script src="https://cdn.rawgit.com/surma-dump/IntersectionObserver/polyfill/polyfill/intersectionobserver-polyfill.js"></script>
    10.  
    11. //include polyfill javascript by which could load content in scroll if necessary
    12.  
    1. var 
    2.     pageSize = 10,
    3.     sentinel = {
    4.         el: null,
    5.         set: function(el) {
    6.             this.el = el;
    7.             this.el.classList.add('sentinel');
    8.             sentinelObserver.observe(this.el);
    9.         },
    10.         unset: function() {
    11.             if (!this.el)
    12.                 return;
    13.             sentinelObserver.unobserve(this.el);
    14.             this.el.classList.remove('sentinel');
    15.             this.el = null;
    16.         }
    17.     },
    18.     sentinelListener = function(entries) {
    19.         console.log(entries);
    20.         
    21.         sentinel.unset();
    22.         listView.classList.add('loading');
    23.         nextPage().then(() => {
    24.             updateSentinel();
    25.             listView.classList.remove('loading');
    26.         });
    27.     },
    28.     updateSentinel = function() {
    29.         sentinel.set(listView.children[listView.children.length - pageSize]);
    30.     },
    31.     nextPage = function() {
    32.         return loadNextPage().then((items) => {
    33.             listView.insertAdjacentHTML(
    34.                 'beforeend', 
    35.                 items.map(item => `
    36.                     <li class="listview__item">
    37.                         <span class="listview__item__id">${item.id}</span>
    38.                         <div class="listview__item__content">
    39.                             <p>${item.text}</p>
    40.                         </div>
    41.                     </li>
    42.                 `).join('')
    43.             );
    44.         });
    45.     },
    46.     loadNextPage = (function() {  //content function that will load when scroll and used in html
    47.         var 
    48.             pageNumber = 0,
    49.             placeholders = [
    50.                 'Lorem Ipsum. Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum',
    51.                 'Lorem Ipsum. Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLoLorem Ipsum. Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum
    52.  
    53.             ]
    54.         ;
    55.         return function () {
    56.             console.log(`Loading page #${pageNumber}`);
    57.             return new Promise(function(resolve, reject) {
    58.                 var items = [];
    59.                 for (var id = pageNumber*pageSize, lastId = id + pageSize - 1; id <= lastId; ++id) {
    60.                     items.push({
    61.                         id: id,
    62.                         text: placeholders[getRandomInRange(0, placeholders.length - 1)]
    63.                     })
    64.                 }
    65.                 pageNumber++;
    66.                 setTimeout(function() { resolve(items); }, getRandomInRange(500, 4000));
    67.             });
    68.         }
    69.     })(),
    70.     getRandomInRange = function(min, max) { 
    71.         return Math.floor(Math.random() * (max - min + 1)) + min;
    72.     },
    73.     listView = document.querySelector('.listview'),
    74.     sentinelObserver = new IntersectionObserver(sentinelListener, {threshold: 1}) // threshold represents the elements area that needs to become visible to trigger the callback
    75. ;
    76.  
    77. nextPage().then(() => { 
    78.     nextPage().then(updateSentinel);
    79. });
    80.  

    Intersection Observer API is used for  trying to figure out the best way to detect when any element enters the viewport.Intersection Observer API is useful in  infinite scrolling, lazy loading images etc.

    The script we have included polyfill in html and javascript by which  we could load the data if only ii is necessary.

    Javascript infinite scroll
    Comment on it

 0 Comment(s)

Sign In
Forgot Password?
                           OR                           
Create an account !!
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Reset Password
Fill out the form below and reset your password: