Đồng vị Bootstrap và tải xuống tải/tải hình ảnh qua json

Question

Sử dụng đồng vị thông thường để tìm nạp ajax đang hoạt động. xem hoạt động jsfiddle.

đồng vị với tải nhẹ thông qua tìm nạp ajax không hoạt động. xem sự cố jsfiddle.

Sự cố: tải nhẹ không kích hoạt và tiếp tục hiển thị hình ảnh màu xám.

JavaScript để thiết lập 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

Tôi giải quyết nó. Working Fiddle

Các vấn đề đã gây ra thất bại:

1. Bootstrap tôi đã phải đặt style = "width: XX; height: XX" trong thẻ hình ảnh quá cùng với chiều rộng bình thường và thông số chiều cao ghi đè bootstrap img {} định nghĩa css là một trong những vấn đề. <img class="lazy" width="200" height="300" style="width: 200px; height: 300px;" data-original="abc.jpg" src="lazygrey.gif">

2. vars Trước AJAX: Kể từ khi tôi đang sử dụng nội dung ajax nên var định nghĩa như thế var $imgs= $("img.lazy"); trước khi gọi ajax doesnot làm việc. Vì vậy, để được an toàn, tôi đã sử dụng trực tiếp $ ("img.lazy").