jQuery.Lazy(): Plugin lädt nicht mein 'li' Inhalt

Question

Das Lazy Plugin funktioniert nicht gut für mich. Ich habe sogar alerts hinzugefügt, um herauszufinden, wo das Problem liegt, aber alles ist in Ordnung für mich. Ich versuche, this Effekt des Plugins für meine Galerie zu verwenden.

Here ist meine Website-Seite, wo ich jQuery.Lazy() verwenden.

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

hier OP!

Okay, Sie möchten den gesamten li Inhalt mit Lazy lazy laden. Dies ist im Allgemeinen möglich. Aber Sie müssen darüber nachdenken, was Sie tun möchten. Es ist kein Problem, Inhalt im Allgemeinen lazy zu laden ...

Sie benötigen ein Backend, wo Sie die Daten abrufen können. Vielleicht ein einfaches php Skript. Sie werden einige Daten an das Skript senden und es wird das html für Sie zurückgeben.

Für unser Beispiel würde das Skript wie folgt aussehen werden:

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

Ziemlich einfach. Es gibt jetzt zwei Möglichkeiten, um das Laden mit Lazy geschehen zu lassen. Wir beginnen zuerst mit dem Komplexen.

---

Way 1: Verwenden Sie einen 'custom loader' sind

Individuelle Lader eine Möglichkeit für Lazy eigene Laderfunktionen zu erstellen. Sie müssen hier alles selbst umsetzen, sind aber flexibler. Wir nennen unsere benutzerdefinierte Last ajaxLoader um einfach zu sein

Zuerst müssen wir Ihre HTML-Elemente ändern. Wir benötigen ein data-loader Attribut, um anzugeben, welchen Loader wir verwenden möchten. Und wir fügen Daten hinzu, die wir in Ihr Skript, die data-id, posten möchten. So sind die li Tags werden wie folgt aussehen:

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

Nun erstellen wir unsere Instanz Lazy, und unsere eigene Loader erstellen. Dies sieht komplexer als es ist (Sie finden alles in meinem jsFiddle example mit mehr Details kommentiert).

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

Das ist es! Jetzt haben Sie Ihren selbstgeschriebenen Lader, um Ihre li Inhalt faulen Weg über AJAX zu laden.

Wokring example.

Wenn Sie eine solche Loader auf verschiedene Instanzen von Lazy sehr oft benötigen, könnten Sie denken über Ihre custom loader in eine plugin in die Zukunft zu ändern. Es ist auch ziemlich einfach, aber Sie müssen Ihren benutzerdefinierten Loader nicht manuell in jede Instanz einfügen. Sie finden ein Tutorial in der git repo oder unter project page.

---

Way 2: Verwenden Sie das AJAX Plugin Lazy

ein bunch of plugins für Lazy Es gibt verschiedene Inhalte zu laden. Es gibt sogar eine , die Sie verwenden könnten. Es ist ein wenig einfacher zu benutzen, aber ist nicht so anpassbar wie ein custom loader.

es zu verwenden, ändern wir das php Skript ein bisschen, $_POST-$_GET:

if(isset($_GET["id"]) && is_numeric($_GET["id"])) { 

Das Element wird auch ein wenig verändert werden. Wir setzen die data-loader auf ajax, was ist der Name des Plugins, und legen Sie ein data-src Attribut, mit der vollständigen URL, wo wir die HTML-Daten laden möchten.

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

Die Schaffung der Lazy Instanz selbst ist dann recht einfach:

$(function() { 
    $('li.lazy').lazy({ 
     threshold: 0 
    }); 
}); 

Um die Wirkung dort arbeitet auch mit der AJAX Plugin zu machen, müssen Sie beforeLoad und afterLoad zur Verfügung gestellt, die Rückrufe verwenden, indem Sie Lazy. Mit diesem können Sie sogar eine Lade-Animation oder etwas erstellen. Auch auf dem ersten Weg ...

---

hoffe ich, dies wird Ihnen helfen verzögertes Laden und die Verwendung von Lazy verstehen.