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.
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)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</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!
Browser other questions tagged php javascript html image
You are not signed in. Login or sign up in order to post.
Possible duplicate of Open images in the background
– Sam
Arthur, take a look at this answer: https://answall.com/a/234137/8063
– Sam
In case how does this friend lazyload work ? Sorry to duplicate.
– reigelado
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.
– Sam
I could without using it ( why would I have to generate images with lower qualities right?) set up to upload images last?
– reigelado
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.
– Sam
That is, the images that the user has not seen, will not be loaded.
– Sam
Ata , I understood , I will perform a test then , thank you brother you saved band from my server.
– reigelado
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?
– reigelado
Do not use in slides... use only for still images of the site
– Sam
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 .
– reigelado
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.
– Sam
You talk plugin in that sense?
– reigelado
I was the one who created with the help of a website , it is simple , I’ll get the code.
– reigelado
Code:https://pastebin.com/BEnTEeXt
– reigelado
If you notice it pulls the images from the bank to generate the html of the images that is great.
– reigelado