Lazy load not working with div

问题:

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>

回答1:

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>