jQuery.Lazy()：插件未加载我的 'li' 内容

Question

插件对我的画廊的 Lazy plugin doesn't work fine for me. I've even added alerts to find where the problem is, but everything is ok for me. I try to use 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 脚本。您将 post 一些数据添加到脚本中，它会 return 为您提供 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 进行加载。我们先从复杂的开始。

方式一：使用'custom loader'

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

首先我们需要更改您的 html 元素。我们需要一个 data-loader 属性来指定我们要使用的加载器。而我们添加一些数据，我们要post到你的脚本中，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 or at the project page.

中找到教程

方式二：使用Lazy的AJAX插件

有一个 bunch of plugins for Lazy to load different content. There is even a AJAX plugin 您可以使用。它更易于使用，但不像 custom loader.

那样可定制

要使用它，我们稍微更改 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 插件，您必须使用 Lazy 提供的回调 beforeLoad 和 afterLoad。有了这个，你甚至可以创建一个加载动画或其他东西。即使在第一条路上...

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

jQuery.Lazy()：插件未加载我的 'li' 内容

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

html

javascript

css

jquery

lazy-loading