https://awenarts.com/new-site/

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  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 >
      <div ></div> 
      <div ></div>              
      <div ><h1></h1></div> 
      <div ><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)
}

CodePudding user response：

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.