Loading images in gallery (No lazyload)

Question

Loading images in gallery (No lazyload)

Navigation

#1 by (1 votes)

0

I have the following code that a gallery puts together:

<div class="contenedorGaleria">
<div class="m-p-g">
    <div class="m-p-g__thumbs" data-google-image-layout data-max-height="350">
        <?php
            $pCarpeta="views/image/fotos/";
            $mascaraTotal="*.jpg,*.JPG,*.png,*.PNG, *.JPEG, *.jpeg";
            $total=count(glob($pCarpeta . "/{" . $mascaraTotal . "}",GLOB_BRACE));
            $contador = 1;
            while ( $contador<= $total) {
                echo "<img src='views/image/fotos/thumbnail/".$contador.".jpg' data-full='views/image/fotos/".$contador.".jpg' class='m-p-g__thumbs-img'/>";
                $contador++;
            }
        ?>
    </div>
    <div class="m-p-g__fullscreen"></div>
</div>

I want the images to load in the DOM only if a total of pixels of the same is visible to the user so that the page does not get slow if the images inside the folder are many, try to use lazyload but not I can make it work because it hits me with dependencies of other files that I can not change anymore.

How can I detect by image inside the while how much is visible on the screen knowing that the maximum height is always 350 px?

javascript php

asked by Juan 25.09.2018 в 14:34

source

1 answer

Using SendGrid V1 and C # how do I delete an email from the lists without knowing the type? dynamically align a column of datatables (Jquery)

score 1 · Accepted Answer

If the (in) compatibility with Internet Explorer is not an obstacle You can use a "Intersection Observer" , this API is designed to observe and calculate intersections between elements, create an observer with a callback (function that processes a list of observed elements) and some options, in the options you give the threshold (lower limit or visibility ratio) that indicates how much of each observed element has to be visible within the root (by default it is the viewport / window / tab). For more clarity a practical example:

to the images we give them a css with an animated background, the src we leave it undefined but we define it in an attribute data-src
we create an observer that when an element is visible it takes the data-src an image with that src is created and an event onload is hooked, this is so that it is loaded behind the scene.
when this image is finished loading the same src is assigned to the element that originated the move (as it is in cache the image appears automagically)
as an additional effect the opacity is raised to normal to achieve a bit of drama

const panoptico = new IntersectionObserver(entries => {
  entries.forEach(
    el => {
      if (el.isIntersecting) {
        let imagen = el.target;
        let foto = document.createElement('img');
        foto.src = imagen.getAttribute('data-src');
        foto.objetivo = imagen;
        foto.onload = (ev) => {
          ev.target.objetivo.src = ev.target.src;
          ev.target.objetivo.style.opacity = 1;
        }
      }
    }
  )
}, {
  threshold: [.75]
});


document.addEventListener('DOMContentLoaded', function() {
  var lasImagenes = document.querySelectorAll('img.lazyload');
  lasImagenes.forEach(i => i.obs = panoptico.observe(i));

});

#scrollArea {
  display: block;
  width: 460px;
  height: 210px;
  overflow-y: hidden;
  overflow-x: auto;
  white-space: nowrap;
  margin: 0 auto;
}

#scrollArea img {
  border: medium none;
  width: 320px;
  height: 200px;
  display: inline-block;
  margin: 0;
  padding: 0;
}

img.lazyload {
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 class%3D%22lds-dual-ring%22 preserveAspectRatio%3D%22xMidYMid%22 style%3D%22background%3A0 0%22 viewBox%3D%220 0 100 100%22%3E%3Ccircle cx%3D%2250%22 cy%3D%2250%22 r%3D%2240%22 fill%3D%22none%22 stroke%3D%22%230DD%22 stroke-dasharray%3D%2262.832 62.832%22 stroke-linecap%3D%22round%22 stroke-width%3D%224%22 transform%3D%22rotate%28126 50 50%29%22%3E%3CanimateTransform attributeName%3D%22transform%22 begin%3D%220s%22 calcMode%3D%22linear%22 dur%3D%221s%22 keyTimes%3D%220%3B1%22 repeatCount%3D%22indefinite%22 type%3D%22rotate%22 values%3D%220 50 50%3B360 50 50%22%2F%3E%3C%2Fcircle%3E%3C%2Fsvg%3E') !important;
  background-color: #fafafa;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 10%;
  transition: opacity .3s ease-in;
  opacity: 0.5;
}

<div id="scrollArea">
  <img data-src="https://picsum.photos/320/200/?image=0" class="lazyload" />
  <img data-src="https://picsum.photos/320/200/?image=3" class="lazyload" />
  <img data-src="https://picsum.photos/320/200/?image=6" class="lazyload" />
  <img data-src="https://picsum.photos/320/200/?image=9" class="lazyload" />
  <img data-src="https://picsum.photos/320/200/?image=12" class="lazyload" />
  <img data-src="https://picsum.photos/320/200/?image=15" class="lazyload" />
  <img data-src="https://picsum.photos/320/200/?image=18" class="lazyload" />
  <img data-src="https://picsum.photos/320/200/?image=21" class="lazyload" />
  <img data-src="https://picsum.photos/320/200/?image=24" class="lazyload" />
  <img data-src="https://picsum.photos/320/200/?image=27" class="lazyload" />
  <img data-src="https://picsum.photos/320/200/?image=30" class="lazyload" />
  <img data-src="https://picsum.photos/320/200/?image=33" class="lazyload" />
  <img data-src="https://picsum.photos/320/200/?image=36" class="lazyload" />
  <img data-src="https://picsum.photos/320/200/?image=39" class="lazyload" />
  <img data-src="https://picsum.photos/320/200/?image=42" class="lazyload" />
  <img data-src="https://picsum.photos/320/200/?image=45" class="lazyload" />
  <img data-src="https://picsum.photos/320/200/?image=48" class="lazyload" />
  <img data-src="https://picsum.photos/320/200/?image=51" class="lazyload" />
  <img data-src="https://picsum.photos/320/200/?image=54" class="lazyload" />
  <img data-src="https://picsum.photos/320/200/?image=57" class="lazyload" />
</div>