☰

Tavriav Lazy Load Scroll Catalog

Lazy load two subsequent pages on Tavriav's catalog pages with 1-second delay, display current page number, and show distance from the bottom

  1. // ==UserScript==
  2. // @name         Tavriav Lazy Load Scroll Catalog
  3. // @namespace    http://tampermonkey.net/
  4. // @version      1.3
  5. // @description  Lazy load two subsequent pages on Tavriav's catalog pages with 1-second delay, display current page number, and show distance from the bottom
  6. // @author       You
  7. // @match        https://www.tavriav.ua/catalog/*/
  8. // @match        https://www.tavriav.ua/catalog/*/?*
  9. // @match        https://www.tavriav.ua/subcatalog/*
  10. // @grant        GM_addStyle
  11. // @license      MIT
  12. // ==/UserScript==
  13.  
  14. (function() {
  15.     'use strict';
  16.  
  17.     const urlParams = new URLSearchParams(window.location.search);
  18.     let currentPage = urlParams.has('page') ? parseInt(urlParams.get('page'), 10) : 1;
  19.     const distanceFromBottom = 4000;
  20.     let loading = false;
  21.     let pagesToLoad = 3;
  22.  
  23.     // Create and style the display divs
  24.     GM_addStyle(`
  25.         #displayDiv {
  26.             position: fixed;
  27.             top: 10px;
  28.             left: 10px;
  29.             background: rgba(0,0,0,0.7);
  30.             color: #fff;
  31.             padding: 5px 10px;
  32.             border-radius: 5px;
  33.             font-size: 14px;
  34.             z-index: 1000;
  35.         }
  36.     `);
  37.  
  38.     const pageNumberDisplay = document.createElement('div');
  39.     pageNumberDisplay.id = "displayDiv";
  40.     document.body.appendChild(pageNumberDisplay);
  41.  
  42.     window.addEventListener('scroll', () => {
  43.         const distance = document.body.offsetHeight - (window.innerHeight + window.scrollY);
  44.         pageNumberDisplay.innerHTML = `Page: ${currentPage}<br>Distance from bottom: ${Math.round(distance)}px`;
  45.  
  46.         if (!loading && distance <= distanceFromBottom) {
  47.             currentPage++;
  48.             loadMultiplePages(currentPage, pagesToLoad);
  49.         }
  50.     });
  51.  
  52.     function appendContent(text) {
  53.         const parser = new DOMParser();
  54.         const doc = parser.parseFromString(text, 'text/html');
  55.         const newContent = doc.querySelector('.catalog-products__container');
  56.  
  57.         if (newContent) {
  58.             document.querySelector('.catalog-products__container').appendChild(newContent);
  59.         }
  60.     }
  61.  
  62.     function fetchPage(pageNum) {
  63.         const currentURL = new URL(window.location.href);
  64.         const params = currentURL.searchParams;
  65.         params.set('page', pageNum);
  66.  
  67.         return fetch(`${currentURL.origin}${currentURL.pathname}?${params.toString()}`)
  68.             .then(response => response.text());
  69.     }
  70.  
  71.     function loadMultiplePages(startPage, count) {
  72.         if (count === 0) {
  73.             loading = false;
  74.             return;
  75.         }
  76.  
  77.         loading = true;
  78.         fetchPage(startPage).then(text => {
  79.             appendContent(text);
  80.             setTimeout(() => {
  81.                 loadMultiplePages(startPage + 1, count - 1);
  82.             }, 1000); // 1-second delay before fetching the next page
  83.         });
  84.     }
  85.  
  86.     loadMultiplePages(currentPage + 1, pagesToLoad); // Start fetching the next two pages immediately
  87. })();