ブートストラップアイソトープとlazyloadはjson経由で画像を取り込み/ロードします

Question

ajaxの取り込みのための通常のアイソトープの使用が機能しています。 を参照してください。jsfiddle

アイザクスフェッチによるlazyloadの同位体は機能しません。 問題を参照してくださいjsfiddle。

問題： lazyloadはトリガしないで、グレーのイメージを表示し続けます。 lazyloadセットアップ用

はJavaScript：

$(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. ブートストラップ私は=スタイルを入れていた「幅：XX;高さ：XX」あまりにも通常の幅と高さのパラメータと一緒にイメージタグでの問題の1つだったブートストラップのimg {} css定義を上書きします。 AJAX前<img class="lazy" width="200" height="300" style="width: 200px; height: 300px;" data-original="abc.jpg" src="lazygrey.gif">

2. VARS： AJAX呼び出しが仕事をdoesnot前var $imgs= $("img.lazy");のように定義されたVARので、私はAjaxのコンテンツを使用しておりますので。だから私は安全に使うために$（ "img.lazy"）を直接使用しました。