Javascript Lazy（）：插件未加载我的'；李'；目录

这个插件不适合我。我甚至添加了

警报

，以查找问题所在，但对我来说一切正常。我尝试在我的图库中使用插件的效果

是我使用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>

.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;
}

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

JS:

<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>

.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;
}

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

在这里

好的，您将使用延迟加载整个

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();
}

<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

的实例，并创建了自己的自定义加载程序。这看起来更复杂（您将在my中找到所有注释，并提供更多详细信息）

就是这样！现在，您有了自己编写的加载程序，可以通过惰性方式加载

li

内容，而不是

AJAX

当您经常在不同的

Lazy

实例上需要这样的加载程序时，您可以考虑将来将

自定义加载程序

更改为

插件

。这也很容易，但您不必手动将自定义加载程序包含到每个实例中。您可以在或中找到教程

---

方法2：使用Lazy的

AJAX

插件

对于

惰性

，有一个加载不同内容的方法。甚至还有一个你可以用的。它使用起来有点简单，但不像

自定义加载程序那样可自定义

要使用它，我们将
php
脚本稍微更改一下，从
$\u POST
更改为
$\u 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"> ...

为了使效果在那里也起作用，使用
AJAX
插件，您必须使用
Lazy
提供的
beforeLoad
和
afterLoad
回调。使用此功能，您甚至可以创建加载动画或其他内容。即使在第一条路上


我希望这将有助于您了解延迟加载和
延迟
的用法。尝试使用较低版本的jquery。@eisbehr我编辑了它，但它不能正常工作，而且我希望li不要延迟加载image@Leothelion我用较低的jq检查，但也不起作用。啊。可以但事实并非如此。您可以使用lazy延迟加载
li的
，但是您需要一个资源，可以通过
AJAX
从中加载内容。您不能延迟加载页面中已经存在的html代码……不，jQuery3可以。你不需要一个较低版本的@Leothelion。它真的很有用：D