How to use jQuery Lazy with AJAX?

Question

I am using jQuery Lazy to load images in a page progressively. When the images are called with AJAX, they do do not load. Please, how to use this Plugin with AJAX?

I tried:

$(function() {
    $('.lazy').lazy({
      placeholder: "data:image/gif;base64,R0lGODlhEALAPQAPzl5uLr9Nrl8e7...",
      effect: "fadeIn",
      effectTime: 2000,
      threshold: 0
    });
});

However it is not working. Some time back, when I had that challenge with Colorbox, the solution was to call for body click, like:

$("body").on("click", ".photos", function(event){
    $(".photos").colorbox({rel:'photos', transition:"fade"});
});

That made the trick to enable colorbox to work with an AJAX call - but with Lazy there is no body click, so even though I did:

$(function() {
    $('body .lazy').lazy({
      placeholder: "data:image/gif;base64,R0lGODlhEALAPQAPzl5uLr9Nrl8e7...",
      effect: "fadeIn",
      effectTime: 2000,
      threshold: 0
    });
});

So, how to use jQuery Lazy with AJAX?

Not really sure what you mean by 'when the images are called with AJAX' - are you calling the .lazy from an ajax method? are you adding images via ajax? — fdomn-m
– fdomn-m, Commented Mar 20, 2018 at 9:38

eisbehr · Accepted Answer · 2018-03-20 09:18:30Z

1

Please think about how jQuery (and Lazy) work. There is not kind of auto detection of new elements (expect somebody builds it on its own). So, if you load new elements via AJAX you need to tell jQuery/Lazy that there are new elements.

In case of Lazy, there are some public functions you can use of an instance. In your case, you would need to use addItems and update.

With addItems, you can add new elements to an existing instance of Lazy. So the plugin knows that he has to handle these elements too. With update, you can force Lazy to do a single update of the current viewport, without using scroll or resize event.

So, that means, you have to slightly update your code:

var instance = $('.lazy').lazy({
    chainable: false, // tell lazy to return its own instance
    placeholder: "data:image/gif;base64,R0lGODlhEALAPQAPzl5uLr9Nrl8e7...",
    effect: "fadeIn",
    effectTime: 2000,
    threshold: 0
});

Afterwards you need to use the two public functions, mentioned above, after the AJAX request got finished. I don't know how you load the new elements, but there might be a callback or something where you could execute these.

instance.addItems('.jquery-selector-for-new-items-only');
instance.update();

If you have the new elements already as jQuery object, you can use addItems with them too. So instead of a selector, just add the object:

instance.addItems($('.jquery-object'));
instance.update();

And that's it ...

answered Mar 20, 2018 at 9:18

eisbehr

12.5k8 gold badges42 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Man Of God Over a year ago

Wow. I wish i could add several plus one to this. Thanks a lot. The following worked for me instance.addItems('.lazy'); instance.update(); . If someone faces the same problem, just add that line to your script

eisbehr Over a year ago

Glad I could helped you! Just another hind: better use a more precise selector than .lazy in your 'addItems' call. Because with this selector, you will add all elements with the class lazy over and over again on each AJAX request. It would be better, if you have a decent selector, just selecting the new elements. Lazy will try to take care, if you add the same items again, but the performance would be better, if you just just a better selector, if possible. @ManOfGod

Collectives™ on Stack Overflow

How to use jQuery Lazy with AJAX?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related