javascript - Lazy load not working with div - Stack Overflow

admin管理员组

文章数量:1389761

I have more than 50 users records. I am using lazy load plugin (/).

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 piled and minified CSS -->
<link rel="stylesheet" href=".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=".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=".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=".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=".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=".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=".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=".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=".png">
            <h2>Username</h2>
            <p>Designation</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<script type="text/javascript" src=".3.1/jquery.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare/ajax/libs/jquery.lazy/1.7.9/jquery.lazy.min.js"></script>

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 piled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn./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./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./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./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./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./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./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./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./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./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare./ajax/libs/jquery.lazy/1.7.9/jquery.lazy.min.js"></script>

• javascript
• jquery
• html
• css
• lazy-loading

Share Improve this question Follow edited Jul 31, 2018 at 12:09 user9437856 asked Jun 29, 2018 at 7:16 user9437856user9437856 2,38844 gold badges4545 silver badges114114 bronze badges 5

• take a look here – Margon Commented Jun 29, 2018 at 7:42
• @Margon, It's not working...any more help in this? – user9437856 Commented Jun 29, 2018 at 11:07
• Or any other plugin for a load more without click event? – user9437856 Commented Jun 29, 2018 at 12:40
• Possible duplicate of jQuery.Lazy(): Plugin is not loading my 'li' contents – 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 Commented Jul 2, 2018 at 7:40

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

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 piled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn./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./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./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./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./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./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./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./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./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./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare./ajax/libs/jquery.lazy/1.7.9/jquery.lazy.min.js"></script>

本文标签： javascriptLazy load not working with divStack Overflow