Slide loading at time of execution

Asked

Viewed 132 times

1

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

php javascript html image

  • Possible duplicate of Open images in the background

  • Arthur, take a look at this answer: https://answall.com/a/234137/8063

  • In case how does this friend lazyload work ? Sorry to duplicate.

  • It’s no big problem to duplicate. It happens. Take a look at the answer, it’s very simple, but you need to use jQuery.

  • I could without using it ( why would I have to generate images with lower qualities right?) set up to upload images last?

  • Lazy Load works like this: where the images are, it will load only 1 default image (can be 1 .png transparent 1 pixel, super light) and only load the other ones if they appear in the view.

  • That is, the images that the user has not seen, will not be loaded.

  • Ata , I understood , I will perform a test then , thank you brother you saved band from my server.

  • One last question, is this image downloaded when it appears to stop the user? In this case I have slideshow and it will only be downloaded when it appears?

  • Do not use in slides... use only for still images of the site

  • is because the slides are causing it , the images that constitute it are very heavy because they are pulled from imdb and this slide has 50 , 100 photos so I wanted to pririze the loading of the rest of the page .

  • Then the problem would be more directed to the slider. Actually upload this much photo is not good. I would have to see the structure of this slider to be able to make it load only the image that is being viewed and not load before everything.

  • You talk plugin in that sense?

  • I was the one who created with the help of a website , it is simple , I’ll get the code.

  • Code:https://pastebin.com/BEnTEeXt

  • If you notice it pulls the images from the bank to generate the html of the images that is great.

Show 11 more comments

1 answer

0


Analyzing your code, to prevent the image from being loaded before it appears in the slider, create a dataset with the image path instead of putting in the src (in the 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 on 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>

  • Friend , did not work , the image is not displayed :/

  • Code: https://pastebin.com/tG2PvY1y

  • Placed preImg(slideIndex,x); within the two functions?

  • How is the answer?

  • I copy as it was in your reply, the result print looks like this:https://i.imgur.com/N0tarux.png

  • Console:https://i.imgur.com/zORjjFg.png

  • Within the function preImg, swap out the slideIndex for i

  • It didn’t work either, I’m trying to edit here so it’s not rolling.

  • OK.. I’ll take a closer look

  • I think it must be something in showSlides because we changed pro date-img ai the original code does not work , to test here some things if it is right here , but I hope your answer!

  • Beauty , I understood friend , I think the error was at the time of setting Child nodes , I tried so: [code]x[slideIndex-1]. childNodes[3]. childNodes[0]. childNodes[0]. src = image.dataset.img;[/code]

  • Replaces like this: [code]Function preImg(slideIndex,x){ var imagem = x[slideIndex-1]. childNodes[3]. childNodes[0]. childNodes[0]; x[slideIndex-1]. childNodes[3]. childNodes[0]. childNodes[0]. src = image.dataset.img; } [/code]

  • Add in your solution there , thank you very much!

Show 8 more comments

Browser other questions tagged php javascript html image

You are not signed in. Login or sign up in order to post.