search

desandro / imagesloaded

:camera: JavaScript is all like "You images done yet or what?"
https://imagesloaded.desandro.com
MIT License
8.88k stars 1.15k forks source link

Timing a page loader only to visible images using imagesLoaded [SOLVED] :) #301

Closed whizzbbig closed 2 years ago

whizzbbig commented 3 years ago

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body class="loading">
    <div class="loading">
      <div id="bm"></div>
    </div>

    <div class="img-inner" style="background-image: url('./img/1.png')"></div>
    <div
      class="img-inner"
      style="background-image: url('./img/1st\ day.png')"
    ></div>
    <div
      class="img-inner"
      style="background-image: url('./img/2nd\ Day.png')"
    ></div>
    <div
      class="img-inner"
      style="background-image: url('./img/3rd\ Day.png')"
    ></div>
    <div class="img-inner" style="background-image: url('./img/4.png')"></div>
    <div
      class="img-inner"
      style="background-image: url('./img/TrippyGirl.png')"
    ></div>
    <div
      class="img-inner"
      style="background-image: url('./img/TrippyMen.png')"
    ></div>
    <div
      class="img-inner"
      style="background-image: url('./img/Tropica_Iridescent_Poster.png')"
    ></div>
    <div
      class="img-inner"
      style="background-image: url('./img/Tropica_Iridescent_Poster_3.png')"
    ></div>

    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.7.12/lottie.min.js"
      integrity="sha512-Dr2QERtNqLw0I06FR7G73CjiWvR4roRMDNTbOGp+qeGhVjEl0xs4AKZzqVFREqdOL3t8ei7H9y9XUcpYVkwEIQ=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    ></script>
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.1/gsap.min.js"
      integrity="sha512-UxP+UhJaGRWuMG2YC6LPWYpFQnsSgnor0VUF3BHdD83PS/pOpN+FYbZmrYN+ISX8jnvgVUciqP/fILOXDjZSwg=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    ></script>
    <script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>
    <script src="./index.js"></script>
    <script>
      // Preload all the images in the page
      imagesLoaded(
        document.querySelectorAll(".img-inner"),
        { background: true },
        () => document.body.classList.remove("loading")
      );
    </script>
  </body>
</html>

CSS

body, html {
    height: 100%;
    margin: 0;
}

body {
    display: grid;
    justify-items: center ;
    overflow: hidden;
    overflow-y: scroll;
}

img {
    max-width: 100%;
}

.loading {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: #fff ;
    z-index: 10;
}

#bm {
    position: absolute;
    top: 40%;
    left: 40%;
    width: 500px;
}

JS 

var animation = bodymovin.loadAnimation({
  container: document.getElementById("bm"),
  renderer: "svg",
  loop: true,
  autoplay: true,
  path: "./data.json",
});
whizzbbig commented 3 years ago

By Doing Something LIke This 


imgLoad.on( 'always', function() {
  console.log( imgLoad.images.length + ' images loaded' );
  // detect which image is broken
  for ( var i = 0, len = imgLoad.images.length; i < len; i++ ) {
    var image = imgLoad.images[i];
    var result = image.isLoaded ? 'loaded' : 'broken';
    console.log( 'image is ' + result + ' for ' + image.img.src );
  }

  setTimeout( () => {
  document.querySelector('.loading').style.display = 'none';
  document.body.style.overflowY = "scroll";}, 2500);
});