Tag: 无限滚动

无限滚动轨道ajax请求触发，但不显示下一个分页页面

我有一个rails应用程序，我正在使用will_paginate 。 然后我使用will_paginate作为无限滚动的基础。 经过大量的试验和错误后，请求似乎正常，但是请求不是在应用程序中呈现下一页内容，而是重新呈现我的所有内容并再次以分页forms显示。 我有一个想法，就是我的部分我的.each迭代器，但我不确定。 下面是我的部分，控制器，js.erb，coffescript和日志。 如果有人可以帮助解释为什么这不能正常工作，我将不胜感激！ 日志：您可以看到它正在获取下一页，并且它会针对每个请求的所有5个页面执行此操作： Started GET “/links?page=2&_=1451404304001” for ::1 at 2015-12-29 10:51:46 -0500 Processing by LinksController#index as JS Parameters: {“page”=>”2”, “_”=>”1451404304001”} Link Load (0.2ms) SELECT “links”.* FROM “links” LIMIT 5 OFFSET 5 (0.1ms) SELECT COUNT(*) FROM “links” Link Load (0.2ms) SELECT “links”.* FROM “links” ORDER BY “links”.”cached_votes_score” DESC LIMIT 5 OFFSET […]

如何将自定义事件绑定到从另一个脚本动态加载的元素？

我有一个无限的滚动脚本，适用于我的tumblr 。 当我向下滚动页面时，它正在加载图像。 然而，我希望图像淡入而不是突然出现。 我发现这个很棒的插件称为路点 ，它可以做到这一点。 它的工作原理，但只适用于首次加载的图像。 之后，它无法识别新加载的图像。 我知道“live”仅适用于某些jQuery函数。 并且绑定可能会更好，因为您可以使用自定义函数。 但后来我显然必须触发脚本，这就是我不知道该怎么做。 这意味着我必须破解执行无限滚动的tumblr脚本， 并且它在那里是可怕的 ，javascript而不是jQuery。 也许你可以推荐一种更好的方法吗？ 以下是适用于前十张图像的代码： $(‘.theImage’).waypoint(function() { $(this).animate({opacity: 1}, ‘slow’); }); 我希望我能做到这样的事情： $（’。theImage’）。bind（“waypoint”，function（）{$（this）.animate（{opacity：1}，’slow’）;}）; 谢谢。 PS的内容是miiiiildly nsfw。 实际上它的sfw，因为一个温和的性感图片甚至不可见，它一直在底部。 干杯。

通过滚动触发’查看更多’按钮

我想在我的图片库中实现无限的scolling。 默认情况下，我的图库会显示前25个图像。 我有一个’view-more’按钮，可以进行ajax调用并在前25个下面的25个图像中加载，依此类推，每次点击view-more按钮。 我想要做的是通过向下滚动页面来触发此视图更多按钮。 从按钮滚动100px将触发ajax加载事件并加载接下来的25个图像。 继续向下将触发下一个25，依此类推…… 我是否需要一个无限加载脚本，如jquery.infiniteload.js，或者是否足以编写一个脚本，当向它滚动100px时触发点击操作.. 我该怎么写这段代码？

如何使用砌体启用无限滚动？

那么如何在我的砌体流体布局中添加或集成无限滚动？ 我已经用谷歌搜索但不明白。这是我到目前为止所得到的： /** * Base js functions */ $(document).ready(function(){ var $container = $(‘.container’); var gutter = 20; var min_width = 270; $container.imagesLoaded( function(){ $container.masonry({ itemSelector : ‘.box’, gutterWidth: gutter, isAnimated: true, columnWidth: function( containerWidth ) { var box_width = (((containerWidth – 2*gutter)/3) | 0) ; if (box_width < min_width) { box_width = (((containerWidth – gutter)/2) […]

如何解决Rails中静默失败的js问题？

应该注意的是，我不是很熟练使用Firebug，但我没有发现任何可以解释以下问题的错误。 我有一个feed.js.erb文件，其中包含以下代码： var $foos = $(”); $(‘#container’).append($foos); $(‘#pagination_button a’).attr(‘href’, ”); 当第二次进行此ajax调用时 ，它似乎无声地失败。 我在Firebug控制台中看到了相应的响应，但$foos没有改变 ，随后#container永远不会被追加。 我的html页面只包含一个加载指示器，它在第一次调用时成功替换。 第二个调用是从其他javascript（ 无限滚动 ）触发的。 如果重要，我注意到第一次调用是使用自动生成的时间戳参数进行的。 在那之后，我正在替换目标url，你可以在我的#pagination_button a上看到。 如何在浏览器中调试？ 更新 ：我使用ERB使$foos成为一个动态变量（$ foos1 … $ foos2）并注意到这也无效。 因此，即使新的@foos在控制台的响应中可见，我的javascript的第一行也没有被评估。

这个无限滚动脚本发生了什么？

我找到了这个无限的滚动脚本 。 它有效，但我不明白这一行： ‘contentData’: {}, // you can pass the children().size() to know where is the pagination 当我把它改成这样的东西时： ‘contentData’: {xyz:($(‘#content’).children().size())}, 每次都是相同的值。 在我的例子中，当我在afterLoad部分中调用alert(($(‘#content’).children().size()))时，该值是正确的（在每个不同的scrolllevent上）。 我不明白如何将contentData设置为不同的值（如第一次加载时为10，第二次加载时为20，等等）。 这是我的脚本： $(function(){ $(‘#content’).scrollPagination({ ‘contentPage’: ‘/democontent.php’, // the page where you are searching for results ‘contentData’: {xyz:($(‘#content’).children().size())}, // you can pass the children().size() to know where is the pagination ‘scrollTarget’: $(window), // who […]

如何在codeigniter中将分页更改为无限滚动

我想将此分页页面更改为无限滚动。 我正在使用codeigniter。 我已经搜索过jquery和ajax，但我真的不明白如何在我的代码中实现它。 所以请帮我编辑我的分页代码到无限滚动。 。 。 我好几天都在挣扎。 如果你能帮助我，我将非常感激。 谢谢 ：） HomeController.php public function list_voucher($page=NULL, $orderBy=NULL) { if($this->session->userdata(‘logged_in’)) { $session_data = $this->session->userdata(‘logged_in’); $data[‘nama’] = $session_data[‘nama’]; $data[‘id’] = $session_data[‘id_user’]; $data[‘tipeUser’] = $session_data[‘tipe_user’]; } else{ $data[‘nama’] = “”; $data[‘id’] = “0”; $data[‘tipeUser’]=””; } $data[‘url_image’] = $this->imageUrl; $data[‘notif’] = ”; $config[‘base_url’] = base_url().’/home_controller/list_voucher/’; $data[‘jmlh_rows’] = $this->voucher->getAllDeals(); $total_row = $data[‘jmlh_rows’]->num_rows(); […]

在AJAX调用后重新初始化jScroll？ （在AJAX加载后仍然加载旧的href）

我正在使用jScroll对从AJAX调用返回的搜索结果进行分页： $(‘#search’).keyup(function() { var search = $(this).val(); $.get(‘/search’, {search : search}, function(results) { $(‘.scroll-table’).html(results); $(‘.scroll-table’).jscroll(); }); }); 进行新搜索后，当我滚动到底部时，jScroll会加载旧搜索的最后一个href的内容。 所以如果我的旧_nextHref是/search?query=A&page=3并且我在搜索字段中输入B，而不是从新的href加载/search?query=B&page=2 ，它将加载/search?query=A&page=3来自旧的href。 显然从ajax成功函数调用jscroll（）将不会重建它并且_nextHref保持设置为其旧值。 我尝试在加载它之前将其销毁，但它会完全加载它： $(‘#search’).keyup(function() { var search = $(this).val(); $(‘.scroll-table’).jscroll.destroy(); $.get(‘/search’, {search : search}, function(results) { $(‘.scroll-table’).html(results); $(‘.scroll-table’).jscroll(); /* now jScroll won’t load at all */ }); }); 能否请您举例说明如何重新初始化jScroll以便加载新的href？

无限的ajax滚动分页循环

我正在使用无限的ajax滚动。 它正在工作，因为我可以点击加载更多项目，这将加载内容。 但是，我应该停在最后一页并显示“没有更多post”，而是仍显示“加载更多项目”链接，点击该链接再次从第2页开始分页。 安慰： Welcome at page 2, the original url of this page would be: /website/home/2 Welcome at page 3, the original url of this page would be: /website/home/3 我应该显示“没有更多的post” – 而是继续如下： Welcome at page 4, the original url of this page would be: /website/home/2 Welcome at page 5, the original url of this […]

无限滚动与Magnific Popup回调

我正在使用Infinite滚动和Magnific Popup。 弹出窗口对“第1页”的内容起作用，但之后失败。 我试图在infiniteScroll调用中使用MagnificPopup的回调。 $grid.infiniteScroll({ path: ‘.pagination__next’, append: ‘.grid__item’, outlayer: msnry, status: ‘.page-load-status’, }, function( newElements ) { $(‘.open-pop’).magnificPopup({ type: ‘inline’, mainClass: ‘mfp-fade’, fixedContentPos: false, gallery: { enabled: true, navigateByImgClick: false, } }); }); 我的问题类似于这个Magnific弹出窗口和无限滚动 ，我试图实现它是不成功的。 可能是一个额外的复杂因素是我正在使用砌体。 这是我的完整代码： // init Masonry var $grid = $(‘.grid’).masonry({ itemSelector: ‘none’, // select none at first columnWidth: ‘.grid__col-sizer’, gutter: […]