javascript - 延迟加载不适用于 div

Question

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

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

我没有在图像标签上添加数据源。是否必须使用 if lazy load with div？

或者谁能知道我可以使用 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>

Answer 1

您不能延迟加载静态页面!它已经在名称中，它是静态的!您可以延迟加载图像，因为它们是资源并在页面本身之后加载。但是 HTML 将在页面请求时加载。因此，延迟加载已加载的元素既不可能也不需要，因为它已经存在。

您可以使用 AJAX 来完成，但需要某种后端。我已经在这里发布了详细的答案: jQuery.Lazy(): Plugin is not loading my 'li' contents

如果您只是想伪造这种行为，您也可以使用自定义加载器来实现。就像改变加载时的不透明度一样。但请记住，这不是真正的延迟加载，它只是淡入。

$('.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>