1

Eu possuo um site com muitas imagens , dessa forma a primeira vez que o usuário abre o site ele demora muito pra carregar por que primeiro carrega as imagens que estão no topo do site pra depois carregar o resto da pagina. Eu queria saber como deixar a minha estrutura da mesma forma ( sem alterar o visual ) e fazer com que o usuário carregue todo o corpo do site pra depois carregar as imagens.

16
  • Possível duplicata de Abrir imagens em segundo plano
    – Sam
    10/02/2018 às 19:35
  • Arthur, dá uma olhada neste resposta: pt.stackoverflow.com/a/234137/8063
    – Sam
    10/02/2018 às 19:35
  • No caso como funciona esse lazyload amigo ?Desculpe duplicar.
    – reigelado
    10/02/2018 às 19:37
  • Não é grande problema duplicar. Isso acontece. Dá uma olhada na resposta, é muito simples, mas é preciso usar jQuery.
    – Sam
    10/02/2018 às 19:38
  • Eu poderia sem usar ele ( porque teria que gerar imagens com qualidades menores certo?) configurar pras imagens carregar por útlimo?
    – reigelado
    10/02/2018 às 19:38

1 Resposta 1

0

Analisando seu código, para evitar que a imagem seja carregada antes de aparecer no slider, crie um dataset com o caminho da imagem em vez de colocar no src (no src, deixe vazio ou coloque uma imagem padrão leve):

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

Criei uma função separada para carregar as imagens:

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

Isso irá carregar a imagem apenas quando ela estiver na sua vez no slider.

Exemplo:

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>

13
  • Amigo , não funcionou , a imagem não é exibida :/
    – reigelado
    10/02/2018 às 21:17
  • Codigo: pastebin.com/tG2PvY1y
    – reigelado
    10/02/2018 às 21:19
  • Colocou preImg(slideIndex,x); dentro das duas funções?
    – Sam
    10/02/2018 às 21:21
  • Como está na resposta?
    – Sam
    10/02/2018 às 21:27
  • Eu copie como estava na sua reposta , o print do resultado está assim:i.imgur.com/N0TARux.png
    – reigelado
    10/02/2018 às 21:45

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .