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

Довольно простой. Теперь есть два способа сделать загрузку с 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: Используйте AJAX плагин ленивых

Есть целый bunch of plugins для Lazy загружать различный контент. Существует даже 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 плагина, вы должны использовать обратные вызовы beforeLoad и afterLoad предоставляемые Lazy. С этим вы даже можете создать анимацию загрузки или что-то еще. Даже на первом пути ...

---

Я надеюсь, что это поможет вам понять, отложенную загрузку и использование Lazy.