Jquery lazyload с ajax

Я использую lazyload () на своем веб-сайте электронной коммерции. lazyload() работает здорово. Я использую этот код для этого:

$(function(){
  $("img.lazy").lazyload({ 
  effect : "fadeIn"
          });
});

также есть некоторые фильтры, такие как цвет, цена и т. д. который запускает ajax и показывает новый результат. Когда приходит новый результат, lazyload () не работает. Я знаю, что мне нужно использовать lazyload() с live (), delegate() или on(). Но я новичок в jQuery и я не мог этого сделать. Кто-нибудь может мне помочь? Моя версия jquery-1.7.2, и мы можем использовать on ().

9
ajax jquery lazy-loading

7 ответов

Примечание: В то время, когда этот ответ был принят, это сработало. Плагин lazy loading изменился, и теперь он сломан. Я не могу не принять ответ и не могу его удалить.

есть еще один Q&A, который предлагает обрабатывать его как часть запроса AJAX, ответственного за вставку дополнительного DOM:

привязка изображения ленивая загрузка к новым изображениям, вставленным после ajax-запроса

однако, это то, как я бы сделал это:

$(document).on('DOMNodeInserted', 'img.lazy', function() {
    $(this).lazyload({
        effect: 'fadeIn'
    });
});

демо: jsfiddle

1

на лучший оптимизированный способ это вызовите lazyload в успехе вашего ajax функция:

$.ajax({
    url: "your url here",
    type: "Post",
    success: function(response){
        // handle your success callback here
        $("img.lazy").lazyload({ 
              effect : "fadeIn"
        });
    }
});

но если вы хотите централизация вызов для плагина lazyload у вас есть 2 варианта:

первый: (не рекомендуется из-за снижения производительности)

$(document).on('DOMNodeInserted', '#container', function() {
    $("img.lazy").lazyload({
        effect: 'fadeIn'
    });
});

но обратите внимание на "# container", это селектор контейнера, где вы покажете свой новый загруженный материал, поэтому код выше будет слушать внутри этого контейнера для любых новых добавленных материалов для запуска lazyload снова на новых изображениях,

второй: (рекомендуется)

вызов пользовательского lazyload, добавив его в JQuery:

$.fn.myLazyLoad = function() {
    this.lazyload({ 
          effect : "fadeIn"
    });
};

затем вызовите его во всех ваших запросах AJAX:

$.ajax({
    url: "your url here",
    type: "Post",
    success: function(response){
        // handle your success callback here
        $("img.lazy").myLazyLoad();
    }
});
5

Lazyload для изображений, загруженных после загрузки окна (например, AJAX), не будет отображать изображения перед событием прокрутки. Это связано с тем, что он внутренне жестко закодирован для запуска начального обновления после события загрузки окна. Все вышеприведенные ответы пока неверны.

1

в дополнение к ответу Абдельхади вы можете лениво загружать новые изображения на успех в качестве обратного вызова или использовать when() таким образом:

   $.when(load_new_image()).done(function(i){

            if($('img.lazy').length){

                 $('img.lazy').lazyload({ 

                          effect:'fadeIn'

                 }).removeClass('lazy').addClass('lazyloaded');

            }

        });

        function load_new_image() {

            return $.ajax({
                url: "your url here",
                type: "Post",
                success: function(response){

                     //append new content
                    $('#container').append(response);

                }
            });
        }

NOTA BENE

1

у меня такая же проблема, при использовании путевых точек бесконечной прокрутки с ленивой загрузкой изображения. (но не работать с контентом ajax).

и я исправил эту проблему с помощью этого : 

$("img.lazy").lazyload({
    effect : "fadeIn",
    event: "scrollstop",
    skip_invisible : true
}).removeClass('lazy');

$(document).bind('DOMNodeInserted', function(e) {
    $("img.lazy").lazyload({
        effect : "fadeIn",
        event: "scrollstop",
        skip_invisible : true
    }).removeClass('lazy');
});

я привязываю конфигурацию ленивой нагрузки на DOMNodeInserted событие.

0

Я использую код ниже, и она работала:

$(document).on('ajaxStop', function() {
   $("img.lazy").lazyload({
        effect: 'fadeIn'
    });
});
-2
   $(document).ajaxStop(function() {$('.loading').removeClass('in');
    $("img.lazy").lazyload({
                effect: "fadeIn",
               container: $("#scrollable"),
               threshold: 100,
            })

      });

работает для изображений ajax. но, тем не менее, не показывает первое изображение по умолчанию. обновление не запускается.

-2