javascript - jQuery.Lazy() : Plugin is not loading my 'li' contents

Question

Lazy插件对我来说效果不佳。我什至添加了 alerts 来查找问题所在，但对我来说一切正常。我尝试使用 this插件对我的画廊的影响。

Here是我使用 jQuery.Lazy() 的网站页面。

HTML:

<div class="gallery-box col-md-9">
  <div class="col-md-11 pull-right">
    <ul>
      <li class="lazy">
        <a href="images/gallery2/image1.jpg" title="Item 1 title ..." data-desc="Item1 a small cake baked in a cup-shaped foil or paper case" rel="lightbox[group1]">
          <img style="width:200px; height:145px;" src="images/gallery2/thumb1.jpg" alt="Image description for search engins" />
          <h4>جشن امضاء عادل فردوسی پور</h4>
        </a>
      </li>
      <li class="lazy">
        <a href="images/gallery2/image2.jpg" title="Item 2 title ..." data-desc="Item 2 A cake made of sweetened cottage cheese or cream cheese, eggs, milk, sugar, and flavorings." rel="lightbox[group1]">
          <img style="width:200px; height:145px;" src="images/gallery2/thumb2.jpg" alt="Image description for search engins" />
          <h4>جشن امضاء هنگامه قاضیانی</h4>
        </a>
      </li>
      <li class="lazy">
        <a href="images/gallery2/image3.jpg" title="Item 3 title ..." data-desc="Item 3 A small, chocolate-covered candy with a hard or soft center." rel="lightbox[group1]">
          <img style="width:200px; height:145px;" src="images/gallery2/thumb3.jpg" alt="Image description for search engins" />
          <h4>جشن امضاء امیر شهاب رضویان</h4>
        </a>
      </li>
      <li class="lazy">
        <a href="images/gallery2/image1.jpg" title="Item 1 title ..." data-desc="Item1 a small cake baked in a cup-shaped foil or paper case" rel="lightbox[group1]">
          <img style="width:200px; height:145px;" src="images/gallery2/thumb1.jpg" alt="Image description for search engins" />
          <h4>جشن امضاء عادل فردوسی پور</h4>
        </a>
      </li>
      <li class="lazy">
        <a href="images/gallery2/image2.jpg" title="Item 2 title ..." data-desc="Item 2 A cake made of sweetened cottage cheese or cream cheese, eggs, milk, sugar, and flavorings." rel="lightbox[group1]">
          <img style="width:200px; height:145px;" src="images/gallery2/thumb2.jpg" alt="Image description for search engins" />
          <h4>جشن امضاء هنگامه قاضیانی</h4>
        </a>
      </li>
      <li class="lazy">
        <a href="images/gallery2/image3.jpg" title="Item 3 title ..." data-desc="Item 3 A small, chocolate-covered candy with a hard or soft center." rel="lightbox[group1]">
          <img style="width:200px; height:145px;" src="images/gallery2/thumb3.jpg" alt="Image description for search engins" />
          <h4>جشن امضاء امیر شهاب رضویان</h4>
        </a>
      </li>
      <li class="lazy">
        <a href="images/gallery2/image1.jpg" title="Item 1 title ..." data-desc="Item1 a small cake baked in a cup-shaped foil or paper case" rel="lightbox[group1]">
          <img style="width:200px; height:145px;" src="images/gallery2/thumb1.jpg" alt="Image description for search engins" />
          <h4>جشن امضاء عادل فردوسی پور</h4>
        </a>
      </li>
      <li class="lazy">
        <a href="images/gallery2/image2.jpg" title="Item 2 title ..." data-desc="Item 2 A cake made of sweetened cottage cheese or cream cheese, eggs, milk, sugar, and flavorings." rel="lightbox[group1]">
          <img style="width:200px; height:145px;" src="images/gallery2/thumb2.jpg" alt="Image description for search engins" />
          <h4>جشن امضاء هنگامه قاضیانی</h4>
        </a>
      </li>
      <li class="lazy">
        <a href="images/gallery2/image3.jpg" title="Item 3 title ..." data-desc="Item 3 A small, chocolate-covered candy with a hard or soft center." rel="lightbox[group1]">
          <img style="width:200px; height:145px;" src="images/gallery2/thumb3.jpg" alt="Image description for search engins" />
          <h4>جشن امضاء امیر شهاب رضویان</h4>
        </a>
      </li>
      <li class="lazy">
        <a href="images/gallery2/image1.jpg" title="Item 1 title ..." data-desc="Item1 a small cake baked in a cup-shaped foil or paper case" rel="lightbox[group1]">
          <img style="width:200px; height:145px;" src="images/gallery2/thumb1.jpg" alt="Image description for search engins" />
          <h4>جشن امضاء عادل فردوسی پور</h4>
        </a>
      </li>
    </ul>
    <div style="clear:both;"></div>
  </div>
</div>

CSS:

.gallery-box ul > div {
  margin-bottom: 20px;
}

.gallery-box li {
  float: right;
  display: inline-block;
  margin-left: 5%;
  min-height: 280px;
  display: block;
}

.gallery-box li {
  min-height: 205px;
  padding: 9px;
  background-color: #fff;
  margin-bottom: 20px;
}

.gallery-box li:last-child {
  margin-left: none;
}

.gallery-box li h4 {
  text-align: center;
}

JS:

$(document).ready(function() {
  $(function() {
    $('li.lazy').lazy({
      effect: "fadeIn",
      effectTime: 2000,
      threshold: 0,
    });
  });
});

Answer 1

点这里!

好的，您希望使用 Lazy 延迟加载整个 li 内容.这在一般情况下是可能的。但是你必须考虑你想做什么。一般情况下懒加载内容是没有问题的...

您将需要一个可以从中获取数据的后端。也许是一个简单的 php 脚本。您将向脚本发送一些数据，它会为您返回 html。

对于我们的示例，脚本看起来像这样:

if( isset($_POST["id"]) && is_numeric($_POST["id"]) ) {
    echo '<a href="images/gallery2/image' . $_POST["id"] . '.jpg" title="Item ' . $_POST["id"] . ' title">';
    echo '  <img src="images/gallery2/thumb' . $_POST["id"] . '.jpg" />';
    echo '  <h4>جشن امضاء عادل فردوسی پور</h4>';
    echo '</a>';

    die();
}

很简单。现在有两种方法可以使用 Lazy 进行加载。我们先从复杂的开始。

---

方式 1:使用“自定义加载器”

自定义加载器是一种为 Lazy 创建自己的加载器函数的方法。你必须在这里自己实现一切，但另一方面你更灵活。我们将自定义加载命名为 ajaxLoader 以简单命名

首先，我们需要更改您的 html 元素。我们需要一个 data-loader 属性来指定我们要使用的加载器。我们添加了一些数据，我们想将其发布到您的脚本，data-id。所以 li 标签看起来像这样:

<li class="lazy" data-loader="ajaxLoader" data-id="1"></li>
<li class="lazy" data-loader="ajaxLoader" data-id="2"></li>
<li class="lazy" data-loader="ajaxLoader" data-id="3"></li>
<li class="lazy" data-loader="ajaxLoader" data-id="4"></li>
<li class="lazy" data-loader="ajaxLoader" data-id="5"> ...

现在我们创建我们的 Lazy 实例，并创建我们自己的自定义加载器。这看起来更复杂(您会在我的 jsFiddle example 中找到所有评论以及更多详细信息)。

$(function() {
    $("li.lazy").lazy({
        threshold: 0,
        ajaxLoader: function(element, response)  {
            $.ajax({
                url: "yourScript.php",
                method: "POST",
                dataType: "html",
                data: {id: element.data("id")},
                success: function(data) {
                    element.html(data).fadeIn(3000);
                    response(true);
                },
                error: function() {
                    response(false);
                }
            });
        }
    });
});

就是这样!现在您已经有了自己编写的加载程序，可以通过 AJAX 以懒惰的方式加载您的li 内容。

Wokring example.

当您经常在 Lazy 的不同实例上需要这样的加载器时，您可以考虑将您的 自定义加载器 更改为 插件 future 。这也很简单，但您不必手动将自定义加载器包含到每个实例中。您可以在 git repo 中找到教程。或在 project page .

---

方式二:使用Lazy的AJAX插件

有一个bunch of plugins Lazy 加载不同的内容。甚至还有一个 AJAX plugin你可以使用。它更易于使用，但不像自定义加载器那样可定制。

为了使用它，我们稍微改变了 php 脚本，从 $_POST 到 $_GET:

if( isset($_GET["id"]) && is_numeric($_GET["id"]) ) {

元素也会有一点变化。我们将data-loader设置为ajax，插件名称是什么，并设置一个data-src属性，完整的URL 我们要从中加载 html 数据的位置。

<li class="lazy" data-loader="ajax" data-src="yourScript.php?id=1"></li>
<li class="lazy" data-loader="ajax" data-src="yourScript.php?id=2"></li>
<li class="lazy" data-loader="ajax" data-src="yourScript.php?id=3"></li>
<li class="lazy" data-loader="ajax" data-src="yourScript.php?id=4"></li>
<li class="lazy" data-loader="ajax" data-src="yourScript.php?id=5"> ...

Lazy 实例本身的创建非常简单:

$(function() {
    $('li.lazy').lazy({
        threshold: 0
    });
});

要使效果也在那里工作，使用 AJAX 插件，您必须使用 提供的回调 beforeLoad 和 afterLoad >懒惰。有了这个，你甚至可以创建一个加载动画或其他东西。即使在第一条路上......

---

希望本文能帮助您理解延迟加载和Lazy的用法。