通过json自举同位素和lazyload获取/加载图像

Question

ajax获取的正常同位素用法正在工作。 看到工作jsfiddle。

通过ajax提取不起作用的同位素lazyload。 请参阅问题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. 引导我只好把作风= “WIDTH：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前：由于我使用这样的VAR定义如下var $imgs= $("img.lazy");之前Ajax调用亘古不变的工作Ajax内容。所以为了安全起见，我直接使用了$（“img.lazy”）。