Запуск функции после завершения вызова ajax Загрузка изображений в Laravel

Question

У меня есть галерея изображений на моей странице, которая очень похожа на pinterest.

$images = Images::paginate(5); 

На моей странице изображения я начинаю с 5 изображений.

Контроллер:

if($request->ajax()) { 
    return [ 
     'images' => view('browse.partials.imagePartials')->with(compact('images'))->render(), 'next_page' => $images->nextPageUrl() 
    ]; 
}   

return view('browse.combined_results')->with('images', $images); 

разметки:

<div id="freewall" class="freewall endless-pagination" data-next-page={{ $images->nextPageUrl() }}> 
@foreach ($images as $image) 
<a href="{{ route('image.get', ['username' => $image->created_by_username, 'URLtitle' => $image->url_title]) }}"> 
    <div class='brick featuredTextContainer' style="width:150px"> 
     <img src='{{ url($image->medium_path) }}' width='100%' class="profileImg"> 
     <span class="featuredArtistName">{{ $image->title }}</span>    
    </div> 
</a> 
@endforeach 
</div> 

Эти изображения расположены с помощью freewall:

var wall = new Freewall("#freewall"); 
wall.reset({ 
    selector: '.brick', 
    animate: true, 
    cellW: 150, 
    cellH: 'auto', 
    onResize: function() { 
     wall.fitWidth(); 
    } 
}); 

var images = wall.container.find('.brick'); 
images.find('img').on('load', function() { 
    wall.fitWidth(); 
}); 

wall.fitWidth();  

wall.fitWidth() представляет собой метод, который организует все изображения аккуратно, вот так:

Однако, если вы прокрутите вниз, вы получите АЯКС просьбой об

$(window).scroll(fetchImages); 

function fetchImages() { 
    var page = $('.endless-pagination').data('next-page'); 

    if(page !== null) { 

     clearTimeout($.data(this, "scrollCheck")); 

     $.data(this, "scrollCheck", setTimeout(function() { 
      var scroll_position_for_images_load = $(window).height() + $(window).scrollTop() + 100; 

      if(scroll_position_for_images_load >= $(document).height()) { 
       $.get(page, function(data){ 
        $('.endless-pagination').append(data.images); 
        $('.endless-pagination').data('next-page', data.next_page); 
       }); 

      } 
     }, 350)) 

    } 
} 

запрос Аякса загружает частичный, который, по существу, только на следующей странице пагинацию ,

imagePartial.blade.php

@foreach ($images as $image) 
     <a href="{{ route('image.get', ['username' => $image->created_by_username, 'URLtitle' => $image->url_title]) }}"> 
      <div class='brick featuredTextContainer' style="width:150px"> 
       <img src='{{ url($image->medium_path) }}' width='100%' class="profileImg"> 
       <span class="featuredArtistName">{{ $image->title }}</span>    
      </div> 
     </a> 
@endforeach 

Другими словами, он загружает в большем количестве изображений от $ изображения PAGINATION в контейнер изображений.

Это замечательно. Оно работает. Однако изображения сразу не размещаются. Вы должны выполнить wall.fitWidth() еще раз для того, чтобы изображения были установлены на место. Проблема в том, что я не могу просто положить это в конце функции fetchImages, потому что изображения занимают некоторое время, чтобы загрузить. Поэтому все изображения загружаются за другие изображения, неподходящие.

Решение этой проблемы было бы, скажем, есть новые изображения, загруженные в с непрозрачностью 0, есть функция wall.fitWidth() выполнена после чек, чтобы убедиться, что все изображения были загружены в DOM, ТОГДА установите образы обратно на непрозрачность: 1. Но я не уверен, как это сделать.

Помогите?

Answer 1

Вы можете сделать это, как это - приготовление одной переменной

var loading = 0; 

и функцию

function imageLoaded(){ 
loading -= 1; 
if(loadingImages == 0){ 
    wall.fitWidth(); 
    var imgs = document.getElementsByTagName('img'); 
    for(var i=0;i<imgs.length;i++) 
    if(imgs[i].style.opacity == '0') 
    imgs[i].style.opacity = '1'; 
} 
} 

затем добавить это ко всем элементам изображения/шаблону изображения

onload="imageLoaded();" style="opacity:0;" 

и, наконец, всякий раз, когда вы загружаете новые изображения, увеличьте , загрузите переменная на количество новых изображений.

Edit:

В ответ на ваш комментарий:

onload="loading-=1;if(loadingImages==0){wall.fitWidth();var imgs=document.getElementsByTagName('img');for(var i=0;i<imgs.length;i++)if(imgs[i].style.opacity=='0')imgs[i].style.opacity='1';}}" style="opacity:0;" 

Это некрасиво, но и делает уверен, что не будет никаких ошибок контекста.