Slide load at run time

Question

Slide load at run time

Navigation

#1 by (0 votes)

1

I have a site with lots of images, so the first time the user opens the site it takes a long time to load because first load the images that are at the top of the site and then load the rest of the page. I wanted to know how to leave my structure in the same way (without changing the look) and have the user load the entire body of the site and then load the images.

php javascript html imagem

asked by anonymous 10.02.2018 / 20:33

1 answer

Update sweetalert 1.x for sweetalert 2 + javascript promises How to make a javascript code update the direct time of the server?

score 0 · Accepted Answer

By analyzing your code , to prevent the image from loading before it appears in the slider, create a dataset with the path of the image instead of putting it in src (in src , leave empty or place a light default image):

<img src="" data-img="<?=imagem?>"...

I created a separate function to load the images:

function preImg(i,x){
   imgidx = i == 2 ? 0 : 1;
   var imagem = x[i-1].childNodes[3].childNodes[imgidx].childNodes[imgidx];
   imagem.src = imagem.dataset.img;
}

This will load the image only when it is in turn in the slider.

Example:

var slideIndex = 1;
showSlides(slideIndex);
carousel();

function carousel() {
    var i;
    var x = document.getElementsByClassName("mySlides");
    for (i = 0; i < x.length; i++) {
      x[i].style.display = "none"; 
    }
    slideIndex++;
    if (slideIndex > x.length) {slideIndex = 1} 
    x[slideIndex-1].style.display = "block";
      preImg(slideIndex,x);
    setTimeout(carousel, 7000);
}
function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
    var i;
    var x = document.getElementsByClassName("mySlides");
    if (n > x.length) {slideIndex = 1} 
    if (n < 1) {slideIndex = x.length} ;
    for (i = 0; i < x.length; i++) {
        x[i].style.display = "none"; 
    }
    x[slideIndex-1].style.display = "block";
    preImg(slideIndex,x);
}

function preImg(i,x){
   imgidx = i == 2 ? 0 : 1;
   var imagem = x[i-1].childNodes[3].childNodes[imgidx].childNodes[imgidx];
   imagem.src = imagem.dataset.img;
}

<div class="slideshow-container">

<div class="mySlides fade">
   <div class="text">
      <a href="xxxxxx<?=$xxxxxx?>" ><?=$xxxxxx?></a>
   </div>
  <a href="xxxxxxxx?>" >
   <center>
   <img height="227" width="500" src="" data-img="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg" style="width:100%">
   </center>
   </a>
<br>
  </div>

<div class="mySlides fade">
<div class="text"><a href="xxxxxx<?=$xxxxxx?>" ><?=$xxxxxx?></a></div>
  <a href="xxxxxxxx?>" ><center><img height="227" width="500" src="" data-img="https://image.freepik.com/fotos-gratis/hrc-tigre-siberiano-2-jpg_21253111.jpg" style="width:100%"></center></a>
<br>
  </div>

<a class="prev" onclick="plusSlides(-1)">&#10094;</a>
<a class="next" onclick="plusSlides(1)">&#10095;</a>

</div>