jQuery.Lazy（）：插件没有加载我的'li'内容 [英] jQuery.Lazy(): Plugin is not loading my 'li' contents
问题描述
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.jpgtitle =Item 1 title ...data-desc =Item1在杯形箔或纸盒中烘焙的小蛋糕 = lightbox [group1]>
< img style =width：200px; height：145px; src =images / gallery2 / thumb1.jpgalt =搜索引擎的图片说明/>
< h4>جشنامضاءعادلفردوسیپور< / h4>
< / a>
< / li>
< li class =lazy>
< a href =images / gallery2 / image2.jpgtitle =Item 2 title ...data-desc =第2项由脱脂奶酪或奶油奶酪，鸡蛋，糖和调味料。 rel =lightbox [group1]>
< img style =width：200px; height：145px; src =images / gallery2 / thumb2.jpgalt =搜索引擎的图片说明/>
< h4>جشنامضاءهنگامهقاضیانی< / h4>
< / a>
< / li>
< li class =lazy>
< a href =images / gallery2 / image3.jpgtitle =Item 3 title ...data-desc =Item 3一个小巧巧克力糖果，有硬或软的中心。 rel =lightbox [group1]>
< img style =width：200px; height：145px; src =images / gallery2 / thumb3.jpgalt =搜索引擎的图片说明/>
< h4>جشنامضاءامیرشهابرضویان< / h4>
< / a>
< / li>
< li class =lazy>
< a href =images / gallery2 / image1.jpgtitle =Item 1 title ...data-desc =Item1在杯形箔或纸盒中烘焙的小蛋糕 = lightbox [group1]>
< img style =width：200px; height：145px; src =images / gallery2 / thumb1.jpgalt =搜索引擎的图片说明/>
< h4>جشنامضاءعادلفردوسیپور< / h4>
< / a>
< / li>
< li class =lazy>
< a href =images / gallery2 / image2.jpgtitle =Item 2 title ...data-desc =第2项由脱脂奶酪或奶油奶酪，鸡蛋，糖和调味料。 rel =lightbox [group1]>
< img style =width：200px; height：145px; src =images / gallery2 / thumb2.jpgalt =搜索引擎的图片说明/>
< h4>جشنامضاءهنگامهقاضیانی< / h4>
< / a>
< / li>
< li class =lazy>
< a href =images / gallery2 / image3.jpgtitle =Item 3 title ...data-desc =Item 3一个小巧巧克力糖果，有硬或软的中心。 rel =lightbox [group1]>
< img style =width：200px; height：145px; src =images / gallery2 / thumb3.jpgalt =搜索引擎的图片说明/>
< h4>جشنامضاءامیرشهابرضویان< / h4>
< / a>
< / li>
< li class =lazy>
< a href =images / gallery2 / image1.jpgtitle =Item 1 title ...data-desc =Item1在杯形箔或纸盒中烘焙的小蛋糕 = lightbox [group1]>
< img style =width：200px; height：145px; src =images / gallery2 / thumb1.jpgalt =搜索引擎的图片说明/>
< h4>جشنامضاءعادلفردوسیپور< / h4>
< / a>
< / li>
< li class =lazy>
< a href =images / gallery2 / image2.jpgtitle =Item 2 title ...data-desc =第2项由脱脂奶酪或奶油奶酪，鸡蛋，糖和调味料。 rel =lightbox [group1]>
< img style =width：200px; height：145px; src =images / gallery2 / thumb2.jpgalt =搜索引擎的图片说明/>
< h4>جشنامضاءهنگامهقاضیانی< / h4>
< / a>
< / li>
< li class =lazy>
< a href =images / gallery2 / image3.jpgtitle =Item 3 title ...data-desc =Item 3一个小巧巧克力糖果，有硬或软的中心。 rel =lightbox [group1]>
< img style =width：200px; height：145px; src =images / gallery2 / thumb3.jpgalt =搜索引擎的图片说明/>
< h4>جشنامضاءامیرشهابرضویان< / h4>
< / a>
< / li>
< li class =lazy>
< a href =images / gallery2 / image1.jpgtitle =Item 1 title ...data-desc =Item1在杯形箔或纸盒中烘焙的小蛋糕 = lightbox [group1]>
< img style =width：200px; height：145px; src =images / gallery2 / thumb1.jpgalt =搜索引擎的图片说明/>
< 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： b
$（document）.ready（function（）{
$（function（）{
$（'li.lazy'） .lazy（{
effect：fadeIn，
effectTime：2000，
threshold：0，
}）;
}）;
} ;
好的，你要懒惰加载整个 li 内容 Lazy 。这通常是可能的。但你必须考虑你想做什么。这是一般的延迟加载内容没有问题...
您将需要一个后端，您可以从中获取数据。也许一个简单的 php 脚本。您将向脚本发布一些数据，它将为您返回 html 。
对于我们的示例，脚本将看起来像这样：
if（isset（$ _ POST [id]）&& is_numeric $ _POST [id]））{
echo'< a href =images / gallery2 / image'。$ _POST [id]。'.jpgtitle =Item'。$ _POST [ id]。'title'>';
echo'< img src =images / gallery2 / thumb'。$ _POST [id]。'.jpg/>';
echo'< h4>جشنامضاءعادلفردوسیپور< / h4>';
echo'< / a>';
die（）;
}
很简单。现在有两种方法可以使用 Lazy 进行加载。
自定义加载程序是为 Lazy 创建自己的加载程序函数的一种方法。你必须在这里实现你自己的一切，但另一方面你更灵活。我们将命名我们的自定义加载 ajaxLoader 为简单
首先，我们需要更改您的html元素。我们需要一个 data-loader 属性来指定我们要使用的加载器。并且我们添加一些数据，我们要发布到您的脚本， data-id 。因此， li 标签将如下所示：
< li class =lazydata-loader =ajaxLoaderdata-id =1>< / li>
< li class =lazydata-loader =ajaxLoaderdata-id =2>< / li>
< li class =lazydata-loader =ajaxLoaderdata-id =3>< / li>
< li class =lazydata-loader =ajaxLoaderdata-id =4>< / li>
< li class =lazydata-loader =ajaxLoaderdata-id =5> ...
现在我们创建 Lazy ，并创建我们自己的自定义加载器。这看起来更复杂，因为它是（你会发现在我的 jsFiddle示例中有更多详细信息）。
$（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 >。
当你在 Lazy 的不同实例上需要这样的加载器时，你可以考虑更改将自定义加载程序插入到插件。这也很容易，但是你不必手动将自定义加载程序包含到每个实例中。您可以在 git中找到教程repo 或专案页面。
方式2：使用 AJAX 懒惰插件
有一个一堆插件 Lazy 加载不同的内容。甚至还有 AJAX 插件。它是一个更容易使用，但不是一个自定义自定义加载器
我们从 $ _ POST 更改 php 脚本到 $ _ GET ：
if（isset（$ _ GET [id]）&& is_numeric（$ _ GET [ id]））{
元素也会改变一点。我们将 data-loader 设置为 ajax ，这是插件的名称，并设置 data-src 属性，其中包含要从中加载html数据的完整 URL 。
< li class =lazydata-loader =ajaxdata-src =yourScript.php？id = 1>< / li>
< li class =lazydata-loader =ajaxdata-src =yourScript.php？id = 2>< / li>
< li class =lazydata-loader =ajaxdata-src =yourScript.php？id = 3>< / li>
< li class =lazydata-loader =ajaxdata-src =yourScript.php？id = 4>< / li>
< li class =lazydata-loader =ajaxdata-src =yourScript.php？id = 5> ...
创建 Lazy 实例本身很容易：
$（function（）{
$（'li.lazy'）。 lazy（{
threshold：0
}）;
}）;
要使效果在那里工作，使用 AJAX 插件，你必须使用提供的回调 beforeLoad 和 afterLoad / code>。有了这个，你甚至可以创建一个加载动画或东西。即使在第一种方式...
我希望这将帮助您了解延迟加载和 Lazy 。
The 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 effect of the plugin for my gallery.
Here is my website page where I use 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,
});
});
});
OP here!
Okay, you whish is to lazy load the whole li contents with Lazy. This is possible in general. But you have to think about what you want to do. It is no problem to lazy load content in general ...
You will need a backend where you can get the data from. Maybe a simple php script. You will post some data to the script and it will return the html for you.
For our example, the script would be look something like this:
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();
}
Pretty simple. There are now two ways to make the loading happen with Lazy. We start with the complex one first.
Way 1: Use a 'custom loader'
Custom loaders are a way to create own loader functions for Lazy. You have to implement everything by your own here, but you are more flexible on the other hand. We will name our custom load ajaxLoader to be simple
First we need to change your html elements. We need an data-loader attribute, to specify which loader we want to use. And we add some data, we want to post to your script, the data-id. So the li tags will look like this:
<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"> ...
Now we create our instance of Lazy, and create our own custom loader. This looks more complex as it is (you will find everything commented in my jsFiddle example with more details).
$(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);
}
});
}
});
});
This is it! Now you got your self-written loader to load your li contents the lazy way over AJAX.
When you need such loader on different instances of Lazy very often, you could think about to change your custom loader into a plugin in the future. It is pretty easy too but you don't have to include you custom loader into every instance manually. You can find a tutorial in the git repo or at the project page.
Way 2: Use the AJAX Plugin of Lazy
There are a bunch of plugins for Lazy to load different content. There is even a AJAX plugin you could use. It is a bit easier to use, but is not so customizeable as a custom loader.
To use it, we change the php script a bit, from $_POST to $_GET:
if( isset($_GET["id"]) && is_numeric($_GET["id"]) ) {
The element will be changed a bit too. We set the data-loader to ajax, what is the name of the plugin, and set a data-src attribute, with the complete URL where we want to load the html data from.
<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"> ...
The creation of the Lazy instance itself is then pretty easy:
$(function() {
$('li.lazy').lazy({
threshold: 0
});
});
To make the effect working there too, with the AJAX plugin, you have to use the callbacks beforeLoad and afterLoad provided by Lazy. With this you can even create a loading animation or something. Even on the first way ...
I hope this will help you understand lazy loading and the usage of Lazy.
这篇关于jQuery.Lazy（）：插件没有加载我的'li'内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
