Bootstrap Isotop und Lazyload holen/laden Bilder über JSON

Question

Normale Isotopennutzung für Ajax holen funktioniert. siehe arbeiten jsfiddle.

Isotop mit Lazyload über Ajax Abruf funktioniert nicht. siehe Problem jsfiddle.

Problem: Lazyload löst nicht aus und zeigt weiterhin graues Bild.

javaScript für lazyload Setup:

$(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

ich es gelöst. Working Fiddle

Probleme, die Fehler verursacht wurden:

1. Bootstrap Ich hatte Stil setzen = "width: XX; Höhe: XX" in-Bild-Tag auch mit dem normalen Breite und Höhe Parameter überschreiben Bootstrap img {} CSS-Definitionen, die eines der Probleme waren. <img class="lazy" width="200" height="300" style="width: 200px; height: 300px;" data-original="abc.jpg" src="lazygrey.gif">

2. Vars Vor AJAX: Da ich Ajax Inhalt bin mit so var wie var $imgs= $("img.lazy"); definiert vor Ajax-Aufruf Arbeit doesnot. Um sicher zu sein, habe ich direkt $ ("img.lazy") verwendet.