Lazy loading

by Imri Paloja

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="container">

  <h1>Lazy loading example</h1>

  <p>Scroll down below to see things lazy loaded</p>

  <p>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  </p>

  <p>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  </p>

  <p>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the...

CSS

html,
body {
  color: #454545;
}

.container {
  margin-top: 5%;
}

/* .hideme {
  opacity: 0.75;
} */

a img {
  margin: 0px auto;
  /* width: 100%; */
}

figure {
  border: 1px solid #CCCCCC;
  background: #EEEEEE;
  padding: 20px 30px;
  margin: 20px auto 20px auto;
  max-width: 250px;
  min-width: 75px;
  width: auto;
  
  max-height: 250px;
  min-height: 75px;
  height: 100%;
  
}

figure img {
  width: 100%;
  height: 100%;
}

figure figcaption {
  font-size: 10px;
  text-align: center;
}

JavaScript

$(document).ready(function() {

  // Executing on page load, to check if the view port has all the content loading.
  LazyLoading();

  // After that, check Every time the window is scrolled
  $(window).scroll(function() {
    LazyLoading();
  });

});

function LazyLoading() {
  // Check the location of each desired element
  $('.lazyloading').each(function(i) {

    var bottom_of_object = $(this).offset().top + $(this).outerHeight();
    var bottom_of_window = $(window).scrollTop() + $(window).height();

    //If the object is completely visible in the window, fade it it
    if (bottom_of_window > bottom_of_object) {

      var src = $(this).data("src")

      /* var src = $(this).attr("href") */
      var title = $(this).attr("title")
      data = '<img src="' + src + '" alt="' + title + '">';

      const img = $(this);
      /* const img = $(this).getElementById('img'); */

      img.html( data);
      img.removeAttr('data-src');

      img.animate({
        'opacity': '1'
      }, 1000);

    }
  });
}