jQuery lazyload plugin apply effect on loaded images

Question

I have a website with tons of images, so I created infinite scroll with ajax, and also I'm using lazyload plugin: http://www.appelsiini.net/projects/lazyload

My problem is: I want to use fadeIn effect for loading images, this is fine when I load first set of images, but when I click on "Load more", fadeIn effect is applied to those images which are already visible and to those which are currently loading. So those images which are already loaded dissapear and appear with fadeIn effect.

How to apply fadeIn effect only to images which are currently loading?

This is how I load images:

$(".loadMore").click(function(){
        ... some validation
        $.ajax({
            type: "POST",
            url: "/loadMore/"+option+"/"+posts,
            dataType: "json",
            beforeSend: function(){
                t.html(lang.loading);
            },
            success: function(data){
                t.html(lang.loadMore);
                for(var i in data.posts.id){
                    append(data.posts.id[i], data.posts.countComments[i], data.posts.image[i], data.posts.title[i], data.posts.link[i], data.posts.username[i], data.posts.date[i], data.posts.new_tab[i], data.posts.is_saved[i], false);
                }

                if(data.msg == "stop"){
                    t.hide();
                }
                $("img.lazy").lazyload({skip_invisible : false,failure_limit : 15, effect: "fadeIn"});
            }

        });
    });

no1spirite · Accepted Answer · 2014-08-31T14:24:03.713

1

Try setting the lazyload plugin outside of the ajax success method. I believe you only have to set it once.

$("img.lazy").lazyload({skip_invisible : false,failure_limit : 15, effect: "fadeIn"}).removeClass("lazy");

$(".loadMore").click(function(){
    ... some validation
    $.ajax({
         ...
             $("img.lazy").lazyload(
                 {
                     skip_invisible : false,
                     failure_limit : 15, 
                     effect: "fadeIn"
                  }).removeClass("lazy");
         ...
    });
});

edited Aug 31 '14 at 14:24

answered Aug 31 '14 at 12:59

no1spirite

608
12
23

I tried that but when I call lazyload only once, then those images which are loaded with ajax, are not contained inside lazyload plugin, therefore, I can't see images which are loaded with ajax – Alen Aug 31 '14 at 13:05
...or even better - http://stackoverflow.com/questions/10035985/binding-image-lazy-loading-to-new-images-inserted-after-ajax-request – no1spirite Aug 31 '14 at 13:23
Edited my post to reflect answer from http://stackoverflow.com/questions/10035985/binding-image-lazy-loading-to-new-images-inserted-after-ajax-request – no1spirite Aug 31 '14 at 14:06
I think you should read [that answer](http://stackoverflow.com/questions/10035985/binding-image-lazy-loading-to-new-images-inserted-after-ajax-request) again as yours is not even close to it. – Sparky Aug 31 '14 at 15:32
I disagree, the bottom line of the answer is to remove the "lazy" class after the lazyload plugin is called. Just because it's in a ajaxStop method makes no difference. – no1spirite Aug 31 '14 at 15:52
I don't know why this answer is downvoted, but it solved my problem. Thank you @no1spirite – Alen Aug 31 '14 at 17:25

jQuery lazyload plugin apply effect on loaded images

1 Answers1