jQuery.Lazy(): Plugin is not loading my 'li' contents

Question

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 pl

Answer 1

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.

Wokring example.

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.