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); 

マークアップ：これらの画像はfreewall使用して配置されている

<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> 

：

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は（）は並べ方法でありますイム年齢すべてきちんと、そのように：あなたはスクロールダウンした場合

しかし、あなたは、AJAXリクエスト

$(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)) 

    } 
} 

を取得するAJAXリクエストが本質的にちょうど次のページである、部分的にロードしますページ区切り。言い換えれば

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 

、それは$画像から改ページ画像のコンテナに複数の画像にロードします。

これは素晴らしいです。できます。ただし、画像はすぐに配置されません。イメージを適所に収めるためにもう一度wall.fitWidth()を実行しなければなりません。問題は、イメージがロードされるのに一瞬かかるので、私は単にfetchImages関数の最後にこれを置くことができないということです。したがって、すべてのイメージは配置されていない他のイメージの後ろにロードされます。

これに対する解決策は次のようになりますと、たとえば、0に設定不透明度にロードされた新しいイメージを持っているwall.fitWidth()機能がTHEN、すべての画像がDOMにロードされていることを確認する確認後を実行していイメージを不透明度に戻す：1。しかし、これをどうやって行うのか分からない。

ヘルプ？

Answer 1

あなたはこのようにそれを行うことができます - 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;" 

に/すべての画像要素にこれを追加する機能を用意します

と最後に新しい画像を読み込むたびに、ローディングは新しい画像の量によって変わります。

編集：あなたのコメントへの返信で

：

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;" 

それは醜いですが、どのようなコンテキストエラーがないと確信してます。