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

OP在这里！

好的，你要用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);
                }
            });
        }
    });
});

就是这样！现在你有自己编写的加载器来加载li内容懒惰的方式而不是AJAX。

<强> Wokring example.

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

方式2：使用Lazy的AJAX插件

Lazy有bunch of plugins加载不同的内容。甚至可以使用AJAX plugin。它使用起来更容易，但不像custom loader那样可以自定义。

要使用它，我们会稍微更改php脚本，从$_POST更改为$_GET：

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

元素也会有所改变。我们将data-loader设置为ajax，该插件的名称是什么，并设置data-src属性，其中包含我们要从中加载html数据的完整URL

<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。有了它，您甚至可以创建加载动画或其他东西。即使是第一种方式......

我希望这有助于您了解延迟加载和Lazy的使用情况。

jQuery.Lazy（）：插件没有加载我的＆＃39; li＆＃39;内容

1 个答案: