Lazy load not working with div

Question

I have more than 50 users records. I am using lazy load plugin (http://jquery.eisbehr.de/lazy/).

My issue is, how to use the lazy load with div? I know how to use this plugin with the image but I am not able to use with div. I tried but it's not working.

I haven't added the data-src on the image tag. Is it mandatory to use if lazy load with div?

or can anyone know other plugin where I can use the div?

$(function() {
  $('.lazy').lazy();
});

.main_content {
  background-color: #ccc;
  color: #fff;
  border: 1px dashed #111;
}

.profile {
  width: 150px;
}

.profile img {
  width: 100%;
}

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<section class="testimonial">
  <div class="container">
    <div class="row">

      <div class="col-md-4 lazy">
        <div class="text-center main_content">
          <div class="profile">
            <img src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/512/user-male-icon.png">
            <h2>Username</h2>
            <p>Designation</p>
          </div>
        </div>
      </div>

      <div class="col-md-4 lazy">
        <div class="text-center main_content">
          <div class="profile">
            <img src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/512/user-male-icon.png">
            <h2>Username</h2>
            <p>Designation</p>
          </div>
        </div>
      </div>

      <div class="col-md-4 lazy">
        <div class="text-center main_content">
          <div class="profile">
            <img src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/512/user-male-icon.png">
            <h2>Username</h2>
            <p>Designation</p>
          </div>
        </div>
      </div>

      <div class="col-md-4 lazy">
        <div class="text-center main_content">
          <div class="profile">
            <img src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/512/user-male-icon.png">
            <h2>Username</h2>
            <p>Designation</p>
          </div>
        </div>
      </div>

      <div class="col-md-4 lazy">
        <div class="text-center main_content">
          <div class="profile">
            <img src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/512/user-male-icon.png">
            <h2>Username</h2>
            <p>Designation</p>
          </div>
        </div>
      </div>

      <div class="col-md-4 lazy">
        <div class="text-center main_content">
          <div class="profile">
            <img src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/512/user-male-icon.png">
            <h2>Username</h2>
            <p>Designation</p>
          </div>
        </div>
      </div>

      <div class="col-md-4 lazy">
        <div class="text-center main_content">
          <div class="profile">
            <img src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/512/user-male-icon.png">
            <h2>Username</h2>
            <p>Designation</p>
          </div>
        </div>
      </div>

      <div class="col-md-4 lazy">
        <div class="text-center main_content">
          <div class="profile">
            <img src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/512/user-male-icon.png">
            <h2>Username</h2>
            <p>Designation</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery.lazy/1.7.9/jquery.lazy.min.js"></script>

Possible duplicate of jQuery.Lazy(): Plugin is not loading my 'li' contents — eisbehr
– eisbehr, Commented Jul 2, 2018 at 7:38
@eisbehr, I am confused, how to use that because I have a static page and they are using ajax. and they are using li and I am using column — user9437856
– user9437856, Commented Jul 2, 2018 at 7:40

eisbehr · Accepted Answer · 2018-07-02 08:42:02Z

You can't lazy load a static page! It's already in the name, it's static! You can lazy-load images, because they are resources and loaded after the page itself. But the HTML will be already loaded on page request. So lazy loading of already loaded elements isn't possible nor it's needed, because it's already there.

You could do it with AJAX, what would need some kind of backend. I already posted an details answer here: jQuery.Lazy(): Plugin is not loading my 'li' contents

If you just want to fake this behavior, you could do this with a custom loader too. Like with changing the opacity on load. But keep in mind, that is no real lazy-loaded, it's just a fade-in.

$('.lazy').lazy({
  threshold: 0,
  showDiv: function(element, response) {
    element.css('opacity', 1);
    response(true);
  }
});

.main_content {
  background-color: #ccc;
  color: #fff;
  border: 1px dashed #111;
}

.profile {
  width: 150px;
}

.profile img {
  width: 100%;
}

.lazy {
  opacity: 0;
  transition: opacity 1s;
}

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<section class="testimonial">
  <div class="container">
    <div class="row">

      <div class="col-md-4 lazy" data-loader="showDiv">
        <div class="text-center main_content">
          <div class="profile">
            <img src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/512/user-male-icon.png">
            <h2>Username</h2>
            <p>Designation</p>
          </div>
        </div>
      </div>

      <div class="col-md-4 lazy" data-loader="showDiv">
        <div class="text-center main_content">
          <div class="profile">
            <img src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/512/user-male-icon.png">
            <h2>Username</h2>
            <p>Designation</p>
          </div>
        </div>
      </div>

      <div class="col-md-4 lazy" data-loader="showDiv">
        <div class="text-center main_content">
          <div class="profile">
            <img src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/512/user-male-icon.png">
            <h2>Username</h2>
            <p>Designation</p>
          </div>
        </div>
      </div>

      <div class="col-md-4 lazy" data-loader="showDiv">
        <div class="text-center main_content">
          <div class="profile">
            <img src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/512/user-male-icon.png">
            <h2>Username</h2>
            <p>Designation</p>
          </div>
        </div>
      </div>

      <div class="col-md-4 lazy" data-loader="showDiv">
        <div class="text-center main_content">
          <div class="profile">
            <img src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/512/user-male-icon.png">
            <h2>Username</h2>
            <p>Designation</p>
          </div>
        </div>
      </div>

      <div class="col-md-4 lazy" data-loader="showDiv">
        <div class="text-center main_content">
          <div class="profile">
            <img src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/512/user-male-icon.png">
            <h2>Username</h2>
            <p>Designation</p>
          </div>
        </div>
      </div>

      <div class="col-md-4 lazy" data-loader="showDiv">
        <div class="text-center main_content">
          <div class="profile">
            <img src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/512/user-male-icon.png">
            <h2>Username</h2>
            <p>Designation</p>
          </div>
        </div>
      </div>

      <div class="col-md-4 lazy" data-loader="showDiv">
        <div class="text-center main_content">
          <div class="profile">
            <img src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/512/user-male-icon.png">
            <h2>Username</h2>
            <p>Designation</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery.lazy/1.7.9/jquery.lazy.min.js"></script>

The lazy load will work with images even static or dynamic but if we are using div then it will only work with dynamic not static. Right?
Yes, correct. You can lazy-load everything what is not already in your page on request.

Collectives™ on Stack Overflow

Lazy load not working with div

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related