Загрузочный изотоп и lazyload fetch/загрузка изображений через json

Question

Работа с обычным изотопом для ajax fetching работает. б/у jsfiddle.

изотоп с lazyload через ajax fetch не работает. смотреть проблема jsfiddle.

Проблема: lazyload не запускается и продолжает показывать серое изображение.

JavaScript для установки LazyLoad:

$(document).ready(function() { 
    // 
    // initialize at ready ; 
    // 
    $container.isotope({ 
     itemSelector: '.box', 
     columnWidth: function (containerWidth) { 
      return containerWidth/12; 
     }, 
     onLayout: function() { 
      $win.trigger("scroll"); 
     } 
    }); 
    // 
    // here i will be using data through api 
    // For now I am defining json manually 
    // var json is defined at top of this code 
    // considering json return was success 
    //$.getJSON(APIURL, function (json) { 
    var newElements = ""; 
    $.each(json, function (key, value) { 
     console.log(key); 
     newElements += 
      '<div class="box">' + 
      '<img class="lazy" src="' + small_img + '" data-originalsrc="' + value['image'] + '" width="' + value['width'] + '" height="' + value['height'] + '" />' + 
      '</div>'; 
    }); 

    var $newElems = $(newElements); 

    $container.append($newElems).imagesLoaded(function() { 

     $container.isotope('appended', $newElems); 

     $imgs.lazyload({ 
      container: $container, 
      effect: "fadeIn", 

     }).removeClass("lazy"); 
     $imgs.trigger('scroll'); 


    }); 
    //}); 
}); 

Answer 1

я решил. Working Fiddle

Вопросы, которые были причина неудачи:

1. Bootstrap я должен был поставить стиль = «ширина: XX; высота: XX» в теге изображений тоже наряду с нормальной шириной и параметром высоты к переписать определения bootstrap img {} css, которые были одной из проблем. <img class="lazy" width="200" height="300" style="width: 200px; height: 300px;" data-original="abc.jpg" src="lazygrey.gif">

2. варов Перед AJAX: Поскольку я использую Ajax содержание так вар определяется как var $imgs= $("img.lazy"); прежде, чем Ajax вызова оленьей кожи работы. Поэтому, чтобы быть в безопасности, я напрямую использовал $ («img.lazy»).