Масонская нагрузка ajax не работает

Question

Загрузка изображений на все товары ajax. Иногда он работает отлично, но в целом он не работает правильно - посмотрите на screen, все изображения перекрывают друг друга. Где моя вина? Я буду реорганизовывать этот код, когда я решу эту проблему :). Backend: Ruby on Rails.

ЯШ:

$(document).ready(function() { 
    (function() { 
    $.ajax({ 
     url: '/photos?page=' + 1, 
     type: 'get', 
     dataType: 'script', 
     success: function(data) { 
     var $container = $('#photo-container'); 
     var items = JSON.parse(data); 

     items.forEach(function(item) { 
      var img = $('<img src="' + item.image.url + '" />'); 
      var elem = $('<div class="grid__item"><img src="' + item.image.url + '" /></div>'); 
      $container.append(elem); 
     }); 

     initMasonry(); 
     initInfiniteScroll(); 
     } 
    }); 
    }()); 
}); 

function initMasonry() { 
    var $container = $('#photo-container'); 

    $container.masonry({ 
    gutter: 20, 
    itemSelector: '.grid__item', 
    columnWidth: 300 
    }); 
} 

function initInfiniteScroll() { 
    var page = 1, 
    loading = false; 

    function nearBottomOfPage() { 
    return $(window).scrollTop() > $(document).height() - $(window).height() - 200; 
    } 

    $(window).scroll(function(){ 
    if (loading) { 
     return; 
    } 

    if(nearBottomOfPage()) { 
     loading=true; 
     page++; 
     $.ajax({ 
     url: '/photos?page=' + page, 
     type: 'get', 
     dataType: 'script', 
     success: function(data) { 
      var $container = $('#photo-container'); 
      var arr = JSON.parse(data); 

      arr.forEach(function(item) { 
      var img = $('<img src="' + item.image.url + '" />'); 
      var elem = $('<div class="grid__item"><img src="' + item.image.url + '" /></div>'); 

      $container.imagesLoaded(function() { 
       $container.append(elem).masonry('appended', elem, true).masonry('reloadItems'); 
      }); 
      }); 

      loading=false; 
     } 
     }); 
    } 
    }); 
} 

Answer 1

success: function(data) { 
    var $container = $('#photo-container'); 
    var arr = JSON.parse(data); 
    var fragment = document.createDocumentFragment(); 
    var elems = []; 

    elems = arr.map(function(item) { 
    var $elem = $('<div class="grid__item"><img src="' + item.image.url + '" /></div>'); 
    $elem.hide(); 
    // get DOM element, not jQuery 
    var elem = $elem[0] 
    // add element, not jQuery, to fragment 
    fragment.appendChild(elem); 
    return elem 
    }); 
    // append elems to container 
    $container.append(fragment); 

    $container.imagesLoaded(function() { 
    // show items once all visible 
    $(elems).show(); 
    $container.masonry('appended', elems) 
    }); 

    loading=false; 
} 

Answer 2

я думаю, что вам нужно "переинициализации" после каждого AJAX. Вы можете использовать $ .ajaxConplete()