laravel 向此脚本添加beforeSend加载

zphenhs4  于 2023-05-08  发布在  其他
关注(0)|答案(1)|浏览(90)

我需要有人帮我写这个剧本。这是一个无限滚动(Laravel中的分页)。脚本工作完美,唯一我不知道的是如何在寻找下一页时添加加载。应该是这样的:

beforeSend: function(){        
  $('.ajax-load').show();
}

但是我不知道怎么做,因为我对JS很陌生。
以下是我的全部代码:

$(document).ready(function(){
                $(window).scroll(fetchCondolences);
                var searching = false;

                function fetchCondolences(){
                    
                    if (!searching) { 
                        searching = true;
                        var page = $('.endless-pagination').data('next-page'); 
                        if(page !== null){
                            clearTimeout( $.data( this, "scrollCheck"));
                            $.data( this, "scrollCheck", setTimeout(function(){
                                var scroll_position_for_condolences_load = $(window).height() + $(window).scrollTop() + 100;
                                searching = false;
                                
                                if(scroll_position_for_condolences_load >= $(document).height()) {
                                    
                                    
                                    $.get(page, function(data){                                        
                                        $('.condolences').append(data.condolences);
                                        $('.endless-pagination').data('next-page', data.next_page);
                                    });
                                    
                                    
                                    
                                } 
                            }, 350)
                            .done(function(data){    
        
                                $('.ajax-load').hide();
                                
                            }))
                        } else{
                            $('.ajax-load').show();
                            $('.ajax-load').html("<center>"+ trans_No_more_records_found +"</center>");
                        }              
                    }
                } 
            });
<section class="condolences endless-pagination pt-4" data-next-page="{{$condolences->nextPageUrl()}}">            
            @include('dead.extras.scroll_condolences')  
        </section>

        <div class="py-4">
            <div class="ajax-load rounded-md hidden w-full py-4 bg-gray-100">
                <center>
                    <p>{{__('Load more')}}... <img class="inline" width="50px" height="50px" src="https://i.gyazo.com/b1821cac720bfa56367e6a23972659ed.gif"></p>
                </center>
            </div>            
        </div>
        <script>var trans_No_more_records_found = "{{__('No more records found')}}";</script>

我很感激任何帮助。谢谢你
我需要有人帮我加个货。

vq8itlhq

vq8itlhq1#

您可以在代码到达if语句时添加加载,以检查滚动位置,并在追加数据时清除加载。

if(scroll_position_for_condolences_load >= $(document).height()) {
  $('.ajax-load').show(); // Show loader
  $.get(page, function(data){
    $('.ajax-load').hide(); // hide loader
    $('.condolences').append(data.condolences);    
    $('.endless-pagination').data('next-page', data.next_page);
  });
}

相关问题