-1

No site que estou desenvolvendo tem uma "galeria carrosel" que é nada mais que um slider, onde apenas uma imagem vai aparecer e tem as setas para o usuario navegar (passa sozinho a casa 5s também)...

Porém da forma que eu fiz, todas as imagens são caregadas com o site, e são 111 imagens, como posso fazer para que isso fique mais otimizado, para que o site não fique muito pesado para carregar.

  <?php for($i=1;$i<=110;$i++){ ?>
    <div class="carousel-item">
      <a data-lightbox="roadtrip" href="<?php echo BASE_URL ?>assets/img/galeria/imagem(<?php echo $i?>).jpg">
        <img class="d-block w-100" src="<?php echo BASE_URL ?>assets/img/galeria/imagem(<?php echo $i?>).jpg" alt="First slide">
      </a>
    </div>
  <?php } ?>

Esse é o código que eu fiz, todas as imagens tem o mesmo nome, só que cada uma tem um numero:

imagem(1).jpg

imagem(2).jpg

lembrando que esse site não possui uma área administrativa

Alguma forma de melhorar isso, sinto que fiz mal feito

4
  • Consigo pensar em uma solução envolvendo Ajax para fazer uma otimização bacana, mas fica um pouco complicado ter que basicamente fazer um projeto completo para te passar essa solução, você não poderia publicar seu projeto em algum lugar para que eu possa testar soluções ou criar uma versão menor do projeto e nos disponibilizar ? Dessa forma posso me concentrar em resolver seu problema ao invés de me concentrar em fazer toda implementação até começar a pensar nele Commented 14/01/2019 às 0:36
  • @ViniciusVieira Então, mas no caso, é só aquele código mesmo, imagina que tem uma pasta com 111 imagens que são nomeadas iguais porem com um numero diferente no final... tudo que eu fiz foi colocar um for que carrega as imagens incrementando o numero, eu não quis adicioanar todas as 111 imagens na mão dentro do código Commented 14/01/2019 às 11:45
  • @ViniciusVieira não existe backend por trás dessa galeria ainda Commented 14/01/2019 às 11:46
  • 1
    Está certo, assim que eu chegar em casa vou tentar colocar em prática a solução que tenho em mente Commented 14/01/2019 às 12:54

1 Resposta 1

1

Bom Otávio após pensar em soluções mirabolosas com Ajax tanto com back-end quanto com front, comecei a pensar "este problema não é atual será que já não o resolveram ?" e a resposta foi sim, existe uma biblioteca chamada Owl Carousel 2 e uma de suas muitas funcionalidades é o Lazy Loading ou carregamento preguiçoso, veja o trecho de código a seguir (que consta na própria documentação):

HTML

<div class="owl-carousel owl-theme">
        <img class="owl-lazy" data-src="https://placehold.it/350x450&text=1" data-src-retina="https://placehold.it/350x250&text=1-retina" alt="">
        <img class="owl-lazy" data-src="https://placehold.it/350x650&text=2" data-src-retina="https://placehold.it/350x250&text=2-retina" alt="">
      <picture>
          <source class="owl-lazy" media="(min-width: 650px)" data-srcset="https://placehold.it/350x250&text=3-large">
          <source class="owl-lazy" media="(min-width: 350px)" data-srcset="https://placehold.it/350x250&text=3-medium">
          <img class="owl-lazy" data-src="https://placehold.it/350x250&text=3-fallback" alt="">
      </picture>
        <img class="owl-lazy" data-src="https://placehold.it/350x250&text=4" alt="">
        <img class="owl-lazy" data-src="https://placehold.it/350x250&text=5" alt="">
        <img class="owl-lazy" data-src="https://placehold.it/350x250&text=6" alt="">
        <img class="owl-lazy" data-src="https://placehold.it/350x250&text=7" alt="">
        <img class="owl-lazy" data-src="https://placehold.it/350x250&text=8" alt="">
        <img class="owl-lazy" data-src="https://placehold.it/350x400&text=9" alt="">
        <img class="owl-lazy" data-src="https://placehold.it/350x400&text=10" alt="">
        <img class="owl-lazy" data-src="https://placehold.it/350x450&text=11" alt="">
 </div>

Javascript (jQuery e Owl Carousel 2)

$(document).ready(function(){
   $('.owl-carousel').owlCarousel({
      items:4,
      lazyLoad:true,
      loop:true,
      margin:10
   });
})

E pronto com esse simples código a mágica está pronta, funciona assim, você cria sua div com as centenas de imagens que você precisa, mas somente o número de imagens setadas em items no javascript será carregada junto com a página, as demais imagens só serão realmente baixadas quando o usuário fizer a requisição delas através de algum evento definido por você, testei aqui inspecionando o trafego do network e a biblioteca realmente cumpre o que promete, achei essa solução muito mais simples e limpa do que eu havia pensado e recomendo muito.

Se quiser ver o exemplo completo se encontra disponível em https://owlcarousel2.github.io/OwlCarousel2/demos/lazyLoad.html e toda documentação da utilização da biblioteca me pareceu bem clara e limpa.

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 .