Jquery在Rails应用程序中加载更多按钮然后无限滚动
我使用这篇文章构建了一个加载更多按钮，如果有@ photos.next_page，则在使用will_paginate加载更多照片后重新出现。 相反，我希望有一个“加载更多”按钮，并转换为无限滚动，就像Instagram一样。
我尝试添加失败：
$(window).on 'scroll', -> url = $('.pagination .next_page a').attr('href') if $(window).scrollTop() > $(document).height() - $(window).height() - 60 $.getScript url 在删除#load_more_photos btn时使用if / else /除非进入脚本。
请编辑以下脚本以实现上述目标：
**pagination.js.coffee** jQuery -> if $('#infinite-scrolling').size() > 0 $('.pagination').hide() loading_photos = false $('#load_more_photos').show().click -> unless loading_photos loading_photos = true url = $('.pagination .next_page a').attr('href') $this = $(this) $this.html("Fetching more videos...").addClass('disabled') $.getScript url, -> $this.text('More posts').removeClass('disabled') if $this loading_photos = false return **show.js.erb** $('#user-profile').append(' "users/profile" %>'); $('.pagination').replaceWith(''); $('.pagination').hide(); $('.pagination, #load_more_photos').remove(); **users.scss** #load_more_photos { display: none; margin-bottom: 20px; } **views/users/show.html.erb** "users/profile" %> Load More Photos
编辑：我试图让下面的代码工作。 但是，我现在遇到的问题是滚动会一遍又一遍地追加page_3。
$(document).on('page:change', function () { if($('#infinite-scrolling').size() > 0) { $('.pagination').hide(); $('#load_more_photos').show(); $('#load_more_photos').on('click', function() { var url = $('.pagination .next_page a').attr('href'); $.getScript(url); $('#load_more_photos').hide(); $(window).on('scroll', function() { if($(window).scrollTop() > $(document).height() - $(window).height() - 60) { $.getScript(url) } }); }); } });
另一个版本的代码，都做同样的事情，一遍又一遍地追加page_3
$(document).on('page:change', function () { if (window.pagination_loading) { return; } if($('#infinite-scrolling').size() > 0) { $('.pagination').hide(); $('#load_more_photos').show(); $('#load_more_photos').on('click', function() { var url = $('.pagination .next_page a').attr('href'); $.getScript(url); $('#load_more_photos').hide(); $(window).bind('scroll', function() { if($(window).scrollTop() > $(document).height() - $(window).height() - 60) { window.pagination_loading = true; $.getScript(url).always(function() { return window.pagination_loading = false; }); } }); }); } });
编辑：
Wtf is... "&_=1468801707048" ?? heroku[router]: at=info method=GET path="/users/1?page=2&_=1468801707048"
我在这个主题的帮助下解决了这个问题， 通过无限滚动防止重复执行 ：
$(window).scroll(function() { if ($('#paginator').length) { var url = $('#load_more').attr('href'); if (url && $('#load_more').inView() && $.active == 0) { $.get(url, function(data) { $('#paginator').append(''); $.getScript(url); }); } } });