懒加载不使用div [英] Lazy load not working with div

问题描述

我有超过50个用户记录。我正在使用延迟加载插件（ http://jquery.eisbehr.de/lazy/ ）。

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

我的问题是，如何使用div的延迟加载？我知道如何使用此插件与图像，但我无法使用div。我试过了但它没有用。

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.

我还没有在image标签上添加data-src。是否必须使用延迟加载div？

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

或者是否有人知道其他插件我可以使用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>

推荐答案

你不能懒加载静态页面！它已经在名字中，它是静态的！您可以延迟加载图像，因为它们是资源并在页面本身之后加载。但HTML将在页面请求中加载。所以延迟加载已经加载的元素是不可能的，也不需要它，因为它已经那里。

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.

你可以用AJAX来做，什么需要某种后端。我已经在这里发布了一个详细的答案：
jQuery。懒惰（）：插件没有加载我的'li'内容

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>

这篇关于懒加载不使用div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！