Плагин jQuery lazyload применяет эффект к загруженным изображениям

У меня есть веб-сайт с множеством изображений, поэтому я создал бесконечную прокрутку с помощью ajax, а также использую плагин отложенной загрузки: http://www.appelsiini.net/projects/lazyload

Моя проблема: я хочу использовать эффект затухания для загрузки изображений, это нормально, когда я загружаю первый набор изображений, но когда я нажимаю «Загрузить еще», эффект затухания применяется к тем изображениям, которые уже видны, и к тем, которые в настоящее время загружаются. Таким образом, те изображения, которые уже загружены, исчезают и появляются с эффектом затухания.

Как применить эффект затухания только к изображениям, которые в данный момент загружаются?

Вот как я загружаю изображения:

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

        });
    });

javascript jquery jquery-lazyload
person Alen    schedule 31.08.2014    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Попробуйте установить плагин lazyload вне метода успеха ajax. Я считаю, что вам нужно установить его только один раз.

$("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");
         ...
    });
});
person no1spirite    schedule 31.08.2014
comment
Я пробовал это, но когда я вызываю lazyload только один раз, те изображения, которые загружаются с помощью ajax, не содержатся внутри плагина lazyload, поэтому я не вижу изображения, которые загружаются с помощью ajax. - person Alen; 31.08.2014
comment
... или даже лучше - stackoverflow.com/questions/10035985/ - person no1spirite; 31.08.2014
comment
Отредактировал мой пост, чтобы отразить ответ из stackoverflow.com/questions/10035985/ - person no1spirite; 31.08.2014
comment
Я думаю, вам следует прочитать этот ответ Опять же как у твоего даже рядом с ним нет. - person Sparky; 31.08.2014
comment
Я не согласен, суть ответа в том, чтобы удалить ленивый класс после вызова плагина lazyload. Просто потому, что это метод ajaxStop, не имеет значения. - person no1spirite; 31.08.2014
comment
Я не знаю, почему за этот ответ проголосовали отрицательно, но он решил мою проблему. Спасибо @no1spirite - person Alen; 31.08.2014