Upload images "on demand"

Asked

Viewed 317 times

-1

On the site I’m developing has a "gallery carrosel" which is nothing more than a slider, where only an image will appear and has arrows for the user to navigate (passes alone the house 5s also)...

But the way I did, all the images are loaded with the site, and there are 111 images, how can I make it more optimized, so that the site does not get too heavy to load.

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

This is the code I made, all the images have the same name, only each one has a number:

image(1). jpg

image(2). jpg

remembering that this site does not have an administrative area

Some way to make it better, I feel like I’ve done wrong

php html jquery optimizing gallery

  • I can think of a solution involving Ajax to do a cool optimization, but it gets a little complicated having to basically do a complete project to get you this solution, Couldn’t you publish your project somewhere so I can test solutions or create a smaller version of the project and make it available to us ? That way I can focus on solving your problem instead of focusing on doing all the implementation until I start thinking about it

  • @Viniciusvieira So, but in this case, it’s just that same code, imagine it has a folder with 111 images that are named equal but with a different number at the end... all I did was put a for that loads the images incrementing the number, I didn’t want to add all 111 images in hand inside the code

  • @Viniciusvieira there is no backend behind this gallery yet

  • 1

    That’s right, as soon as I get home I’ll try to put into practice the solution I have in mind

1 answer

1


Good Otávio after thinking of mirabolosas solutions with Ajax both with back-end and with front, I began to think "this problem is not current will not already solved ?" and the answer was yes, there is a library called Owl Carousel 2 and one of its many features is Lazy Loading or lazy loading, see the following code snippet (which is in the documentation itself):

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 and Owl Carousel 2)

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

And ready with this simple code the magic is ready, it works like this, you create your div with the hundreds of images you need, but only the number of images set in items in javascript will be loaded along with the page, the other images will only actually be downloaded when the user requests them through some event defined by you, tested here inspecting the traffic of the network and the library really fulfills what promises, found this solution much simpler and cleaner than I had thought and highly recommend.

If you want to see the full example is available at https://owlcarousel2.github.io/OwlCarousel2/demos/lazyLoad.html and all documentation of the use of the library seemed to me clear and clean.

Browser other questions tagged php html jquery optimizing gallery

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