CODEWITHSUNDEEP
javascripthtmlcsslazy-loading
Danish Adeel
Danish Adeel

Reputation: 730

Lazy loading not showing on screen img

I am using a following js code for lazy loading on my website, its working great for offscreen images but I wants to add a condition that even if the img is on screen it should work, right now its not showing my first image but working for the second one.

  // Lazy Load Start
  document.addEventListener("DOMContentLoaded", function()
  {
    var e, n = document.querySelectorAll(".lazy");

    function t()
    {
      e && clearTimeout(e), e = setTimeout(function()
      {
        for (var e = window.pageYOffset, o = 0; o < n.length; o++) n[o].offsetTop < window.innerHeight + e && (n[o].src = n[o].dataset.src, n[o].classList.remove("lazy"));
        0 == n.length && (document.removeEventListener("scroll", t), window.removeEventListener("resize", t), window.removeEventListener("orientationChange", t))
      }, 20)
    }
    document.addEventListener("scroll", t), window.addEventListener("resize", t), window.addEventListener("orientationChange", t)
  });
  // Lazy Load End
h2{
margin-bottom: 50px
}
<div class="content txt">
  <p class="img"><img class="lazy" alt="Missing Img" data-src="https://via.placeholder.com/350x150"></p>
  <h2 class="h1">Go Down</h2>
  <h2 class="h1">Go Down</h2>
  <h2 class="h1">Go Down</h2>
  <h2 class="h1">Go Down</h2>
  <h2 class="h1">Go Down</h2>
  <h2 class="h1">Go Down</h2>
  <h2 class="h1">Go Down</h2>
  <h2 class="h1">Go Down</h2>
  <h2 class="h1">Go Down</h2>
  <h2 class="h1">Go Down</h2>
  <h2 class="h1">Go Down</h2>
  <h2 class="h1">Go Down</h2>
  <h2 class="h1">Go Down</h2>
  <p class="img"><img class="lazy" data-src="https://via.placeholder.com/350x150"></p>
</div>

Upvotes: 0

Views: 191

Answers (1)

Vadim Hulevich
Vadim Hulevich

Reputation: 1833

All you need it's just once load your t function:

    document.addEventListener("DOMContentLoaded", function() {
        var e, n = document.querySelectorAll(".lazy");

        function t() {
            e && clearTimeout(e), e = setTimeout(function() {
                for (var e = window.pageYOffset, o = 0; o < n.length; o++) n[o].offsetTop < window.innerHeight + e && (n[o].src = n[o].dataset.src, n[o].classList.remove("lazy"));
                0 == n.length && (document.removeEventListener("scroll", t), window.removeEventListener("resize", t), window.removeEventListener("orientationChange", t))
            }, 20)
        }
        t(); // just call
        document.addEventListener("scroll", t), window.addEventListener("resize", t), window.addEventListener("orientationChange", t)
    });
    <div class="content txt">
        <p class="img"><img class="lazy" alt="Missing Img" data-src="https://via.placeholder.com/350x150"></p>
            <h2 class="h1">Go Down</h2>
            <h2 class="h1">Go Down</h2>
            <h2 class="h1">Go Down</h2>
            <h2 class="h1">Go Down</h2>
            <h2 class="h1">Go Down</h2>
            <h2 class="h1">Go Down</h2>
            <h2 class="h1">Go Down</h2>
            <h2 class="h1">Go Down</h2>
            <h2 class="h1">Go Down</h2>
            <h2 class="h1">Go Down</h2>
            <h2 class="h1">Go Down</h2>
            <h2 class="h1">Go Down</h2>
            <h2 class="h1">Go Down</h2>
            <p class="img"><img class="lazy" data-src="https://via.placeholder.com/350x150"></p>
    </div>

Upvotes: 1

Related Questions