Jquery.Lazy(): Plugin Is Not Loading My 'Li' Contents

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

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.

jQuery.lazy() plugin not working on images loaded via AJAX

The problem was the missing scroll-event on the AJAX load with lazy by default. Adding the config parameter bind: "event" to lazy in my ajax function solved the issue.

jQuery("img.lazy").lazy({
    effect: "fadeIn",
    effectTime: 1000,
    bind: "event"
});

jQuery Lazy Loading - Problem with display:none

Lazy Load is currently not usable. It does not work with the latest browsers as expected.

... from the url of your plugin

and if you still want to use that plugin, i think you can call

$("img:visible").lazyload({
     placeholder : "img/grey.gif",
     effect      : "fadeIn"
  });

hope that help...

How to Lazy Load div background images

First you need to think off when you want to swap. For example you could switch everytime when its a div tag thats loaded. In my example i just used a extra data field "background" and whenever its set the image is applied as a background image.

Then you just have to load the Data with the created image tag. And not overwrite the img tag instead apply a css background image.

Here is a example of the code change:

if (settings.appear) {
    var elements_left = elements.length;
    settings.appear.call(self, elements_left, settings);
}
var loadImgUri;
if($self.data("background"))
    loadImgUri = $self.data("background");
else
    loadImgUri  = $self.data(settings.data_attribute);

$("<img />")
    .bind("load", function() {
        $self
            .hide();
        if($self.data("background")){
            $self.css('backgroundImage', 'url('+$self.data("background")+')');
        }else
            $self.attr("src", $self.data(settings.data_attribute))

        $self[settings.effect](settings.effect_speed);

        self.loaded = true;

        /* Remove image from array so it is not looped next time. */
        var temp = $.grep(elements, function(element) {
            return !element.loaded;
        });
        elements = $(temp);

        if (settings.load) {
            var elements_left = elements.length;
            settings.load.call(self, elements_left, settings);
        }
    })
    .attr("src", loadImgUri );
}

the loading stays the same

$("#divToLoad").lazyload();

and in this example you need to modify the html code like this:

<div data-background="http://apod.nasa.gov/apod/image/9712/orionfull_jcc_big.jpg" id="divToLoad" />

but it would also work if you change the switch to div tags and then you you could work with the "data-original" attribute.

Here's an fiddle example: http://jsfiddle.net/dtm3k/1/

Merging the lazyload plugin jquery code inside my own jquery file

You should be able to copy the source of one file into the other without any problems.

Just make sure everything is defined before you use it. A good approach is to first include jQuery, then any plugins, then your own code.

It doesn't really matter if they are in the same file or separate files - the only thing that matters is the order.

How to make script execution wait until jquery is loaded

edit

Could you try the correct type for your script tags?
I see you use text/Scripts, which is not the right mimetype for javascript.

Use this:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> 
<script type="text/javascript" src="../Scripts/jquery.dropdownPlain.js"></script>
<script type="text/javascript" src="../Scripts/facebox.js"></script>

end edit

or you could take a look at require.js which is a loader for your javascript code.

depending on your project, this could however be a bit overkill

Jquery.Lazy(): Plugin Is Not Loading My 'Li' Contents