jQuery.Lazy（）：插件未加载我的“ li”内容

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！

[好的，您希望将li的全部内容延迟加载。通常这是可能的。但是您必须考虑要做什么。懒惰加载内容一般没问题...

您将需要一个可以从中获取数据的后端。也许是一个简单的Lazy脚本。您将一些数据发布到脚本中，它将为您返回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(); }加载。我们先从复杂开始。

方式1：使用“自定义加载程序”

自定义加载程序是为Lazy创建自己的加载程序功能的一种方法。您必须在这里自己实现所有内容，但另一方面，您会更加灵活。我们将自定义负载Lazy命名为简单

首先，我们需要更改您的html元素。我们需要一个ajaxLoader属性，以指定要使用的加载程序。然后添加一些数据，我们要发布到您的脚本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

就是这个！现在，您可以使用自己编写的加载程序，以[[lazy way取代$(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中找到教程。
方式2：使用惰性的project page插件
AJAX有一个bunch of plugins来加载不同的内容。您甚至可以使用Lazy。它使用起来稍微容易一些，但不能像AJAX plugin那样自定义。
[要使用它，我们将AJAX脚本从custom loader更改为php：
$_POST
元素也将有所改变。我们将$_GET设置为if( isset($_GET["id"]) && is_numeric($_GET["id"]) ) {，插件的名称是什么，并设置一个data-loader属性，并带有要从中加载html数据的完整ajax。
data-src
然后创建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的用法。

Answer 2

@ eisbehr现在让我们想象一下，我们使用ajax请求（php）来获取元素的整个列表，并且我们事先不知道要显示的列表中元素的ID ... [Thx

jQuery.Lazy（）：插件未加载我的“ li”内容

问题描述投票：3回答：2

2个回答

最新问题

jQuery.Lazy（）：插件未加载我的“ li”内容

问题描述 投票：3回答：2

2个回答

最新问题

问题描述投票：3回答：2