Home When I change the pictures after entering the site, the pictures are uploaded late

Questions

When I change the pictures after entering the site, the pictures are uploaded late

December 29, 2022

When you enter the connection for the first time, you change the pictures using the mouse wheel. but at first the pictures are loading late

but it’s fine the next time you come to the same picture. I wonder if we need to throw the pictures into the browser’s cache before the page is loaded? I will be glad if you help

HTML code:

  <section class="section active-page" data-filter="section-1">   
    <script type="text/javascript"> 
      const pData = [
        {
          url   : 'images/parallax/parallax_1.jpg',
          title : 'lorem ipsum'
        },
        {
          url   : 'images/parallax/parallax_2.jpg',
          title : 'lorem ipsum'
        },
        {
          url   : 'images/parallax/parallax_3.jpg',
          title : 'lorem ipsum'
        },       
      ];
    </script>    
    <div class="parallax">
      <div class="image-layer"></div> 
      <div class="layer-shadow"></div>              
      <div class="parallax-title"><h1></h1></div> 
      <div class="image-no"><h5></h5></div> 
    </div>    
  </section>

JS code:


var parallax = document.querySelector('.parallax');
var iLayer = document.querySelector('.image-layer');    
var lShadow = document.querySelector('.layer-shadow');  
var pTitle = document.querySelector('.parallax-title h1');
var iNo = document.querySelector('.image-no h5');
var dLength = pData.length;
var dNo = 0;

sParallax();
parallax.addEventListener('wheel', throttle(() => { 
    
    if (event.deltaY < 0) {    
        dNo++;        
        if(dNo >= dLength) {
            dNo = 0;
        }    
        pTitle.classList.add('slide-text-down');
        sParallax();
    }   
    else if (event.deltaY > 0) {                      
        dNo--;        
        if(dNo < 0) {
            dNo = dLength - 1;
        }
        pTitle.classList.add('slide-text-up');
        sParallax();
    }       
},2000));

function sParallax() {      
    iNo.innerHTML = "0" + (dNo+1) + " - " + "0" + dLength;
    iLayer.classList.add('filter-off');
    lShadow.classList.add('shadow-off');
    
    setTimeout(function(){  
        parallax.style.backgroundImage = 'url('+ pData[ dNo ].url +')';     
        iLayer.classList.remove('filter-off');  
        lShadow.classList.remove('shadow-off'); 
        pTitle.classList.remove('slide-text-up');
        pTitle.classList.remove('slide-text-down');
        pTitle.innerHTML =  pData[dNo].title;       
    },800)
}