Подгрузка изображения через lazyload и форму на ajax

[Vaska]

Приветствую!

Ищется рабочее решение, чтобы после сохранения контента в форме, которая отправляет контент через ajax, при возвращении подгружались фотки в lazyload?

Вот код формы:

function submitEditableModelForm(){
	
    var _form = $("#editable_model_form");
    if(_form.valid()) $.ajax({ // рони if(_form.valid()) 
        type: "POST",
        url: _form.attr('action'),
        data: _form.serialize(),
        dataType:"json",
        success: function (res) {
                if (res.code == 10000) {
                    $('.dialog_close_button').click()
                    $('.editable-page-model[data-id='+res.result.config_id+']').replaceWith(res.result.model_html)
                    addDialogEvent()
                    initSlide()
                }else{
                    layer.msg(res.message)
                }
        }
    });
}

Код lazyload:

$("img.lazyload-scroll").lazyload({
       //placeholder : "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8VA8AAmkBc7YFeIIAAAAASUVORK5CYII=",
        effect: "fadeIn",
        skip_invisible : false,
       threshold : 400,	
   });

Вывод изображения:

<img class="lazyload"  data-original="/default/images/sell-violet.jpg"  placeholder="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==">

Заранее спасибо, за помощь!

[Vaska]

Заработало так:

$(document).bind('DOMNodeInserted', function(e) {
....
});

[Vaska]

$(document).bind('DOMNodeInserted', function(e) {
....
});

Однако такой вариант ведет себя не комфортно. Изображения, визуально, по два раза перезагружаются.

Подскажите ещё вариант?

[рони]

Vaska,
информации недостаточно, что за плагин, что у вас заработало, почему img.lazyload-scroll и class="lazyload", это разные элементы или одни и теже и т.д.

Код lazyload: примерно должен быть такой

function lazy()
{
   $("img.lazyload-scroll:not(.lazy)").addClass("lazy").lazyload({
       //placeholder : "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8VA8AAmkBc7YFeIIAAAAASUVORK5CYII=",
        effect: "fadeIn",
        skip_invisible : false,
       threshold : 400,
   });

}

lazy() запускать где вам надо и в строке 13.

[Vaska]

рони,
плагин ленивой загрузки использую такой Lazy Load 1.9.3 Mika Tuupola https://github.com/tuupola/lazyload

Объясню суть где использую ленивую загрузку:
есть конструктор дизайна страницы, на которой можно выбрать разные модули из имеющихся и перетаскиванием разместить на странице. По сути, в базу прописываются параметры модуля и адрес страницы, на которой размещается модуль.

Ваш вариант работает с формой отлично, однако в момент перетаскивания нового дубликата модуля, содержащего изображение на страницу, изображение не подгружается. Как-то нужно сделать, чтобы при размещении модуля, скрипт один раз модуль перезагружал.

Тот вариант, который я привел, с ним такой проблемы нет, он всё по два раза перезагружает где надо и не надо.

[Vaska]

Vaska,
почему img.lazyload-scroll и class="lazyload", это разные элементы или одни и теже и т.д.

Я скопировал второй дубликат кода плагина, ошибся с названием класса, но сути вопроса это не меняет.
Нужный экземпляр такой же, с нужным классом.

[рони]

однако в момент перетаскивания нового дубликата модуля, содержащего изображение на страницу,

так добавьте lazy() в стоп перетаскивания.

[Vaska]

рони,
теперь при перезагрузке страницы не грузятся фотки.

Такой вариант правильно работает в любых условиях, в моём случае:

$(document).on('DOMNodeInserted', '#scrollable', function() {
    $("img.lazyload").lazyload({
        effect: "fadeIn",
        skip_invisible : false,
        threshold : 200,
            })
      });

рони, спасибо за участие!