Databases
StackOverflow2013
Postsdbo
POTwo page content load with jQuery Infinite scroll script (when only one load required)
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POTwo page content load with jQuery Infinite scroll script (when only one load required)
    text
    copied!<p>I'm writing a little <em>jQuery</em> script for my tumblr page, that emulates infinite scroll loading via <code>jQuery.get()</code> the content that I want from the next pages of the site (it's a <strong>tumblr</strong> site, so the pagination is OK).<br> I know that there are some infinite scroll plugins, but all I tried not working for me and, besides, are pretty fatty. I don't need all that funcionality. The script loads the new elements that I want, yes, but the problem is that loads the content from two pages every time. And, obviously, it should load instead only a single page content.</p> <p>The <em>jQuery</em> is: </p> <pre><code> $(document).ready(function() { "use strict"; var nextPage = 2; var totalPages = {TotalPages}; var url = '/page/'; // base url $(document).on('scroll', function() { if (nextPage &lt;= totalPages) { // if exist new pages if ($(window).scrollTop()== $(document).height() - $(window).height()) { // when reach the page bottom $.get(url + nextPage, function(data){ // get the next page $(data).find(".post").appendTo(".posts"); // filter content we want and append it to the actual page element picturefill(); // reload picturefill,making the new images responsive }); nextPage++; // increment nextpage counter }; } else { // exit if no more pages return; } }); }); </code></pre> <p>And the content that it loads is: </p> <pre><code>&lt;div class="posts"&gt; &lt;article class="photo-container post" id="{PostID}" data-reblog="{ReblogURL}"&gt; &lt;div class=" picturefill" data-picture data-alt="" data-class="photo"&gt; &lt;div class="picturefill" data-src="{PhotoURL-HighRes}" &gt;&lt;/div&gt; &lt;div class="picturefill" data-src="{PhotoURL-500}" data-media="(max-width: 568px)"&gt;&lt;/div&gt; &lt;div class="picturefill" data-src="{PhotoURL-250}" data-media="(max-width: 250px)"&gt;&lt;/div&gt; &lt;img alt="" class="photo" src="http://img.jpg"&gt; &lt;!-- generated by picturefill --&gt; &lt;noscript&gt;&lt;img class="photo" src="{PhotoURL-HighRes}" alt=""&gt;&lt;/noscript&gt; &lt;/div&gt; &lt;!-- MORE CODE --&gt; &lt;/article&gt; </code></pre> <p></p> <p>I use <a href="https://github.com/scottjehl/picturefill" rel="nofollow">Picturefill</a> for responsive images and that works well. Anybody have a idea? Thanks.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload