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

Question

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)
}

score 0 · Accepted Answer · answered Dec 29 '22 at 20:20

The issue is that the image is not downloaded the first time until the class is changed to the appropriate value.

To preload the images, store them in a local array as in the following answer:

Preloading images with JavaScript

This will ensure that all images are in the cache before being needed.

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

1 Answers1