Isotopo bootstrap e caricamento lazyload/caricamento di immagini via json

Question

L'utilizzo di isotopi normale per il caricamento di ajax funziona. vedi lavoro jsfiddle.

isotopo con lazyload tramite ajax fetch non funziona. vedi problema jsfiddle.

Problema: lazyload non si attiva e continua a mostrare l'immagine grigia.

JavaScript per impostazione 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

ho risolto. Working Fiddle

problemi che causavano il fallimento:

1. Bootstrap ho dovuto mettere style = "width: XX; altezza: XX" nel tag di immagine anche con larghezza normale e il parametro altezza sovrascrivi le definizioni di boot imrap img {} css che erano uno dei problemi. <img class="lazy" width="200" height="300" style="width: 200px; height: 300px;" data-original="abc.jpg" src="lazygrey.gif">

2. vars Prima AJAX: Dal momento che sto usando contenuti ajax così var definito come var $imgs= $("img.lazy"); prima chiamata ajax doesnot lavoro. Quindi per sicurezza ho usato $ ("img.lazy") direttamente.