Infinite Scroll - Issue with first load I created a view that displays all the products of my website's database.

First of all, my view looks like this. As you can see I am using Responsive Grid as my layout format. 

Because of the fact that I chose to work with Responsive Grid, I implemented some code to identify the content selectors to Infinite Scroll.

  case 'responsive_grid':
    $content_selector = '.view-content &gt; div';
    $items_selector = '.views-row';
    break;


I am overriding the output of this view using a template file. The reason is that for every 12 blocks of content I have to display a banner for a product category. You can see the snippet bellow.

&lt;?php if (!empty($title)) : ?&gt;
  &lt;h3&gt;&lt;?php print $title; ?&gt;&lt;/h3&gt;
&lt;?php endif; ?&gt;
  &lt;div class="&lt;?php print $classes; ?&gt;"&gt;
&lt;?php if ($options['alignment'] == 'vertical') : ?&gt;
&lt;?php foreach ($columns as $column_id =&gt; $column) : ?&gt;
  &lt;div class="&lt;?php print trim($column_classes[$column_id]); ?&gt;"&gt;
  &lt;?php foreach ($column as $item_id =&gt; $item) : ?&gt;
    &lt;div class="&lt;?php print trim($item['classes']); ?&gt;"&gt;
      &lt;?php print $item['content']; ?&gt;
    &lt;/div&gt;
  &lt;?php endforeach; ?&gt;
  &lt;/div&gt;
&lt;?php endforeach; ?&gt;
&lt;?php else : ?&gt;
  &lt;?php foreach ($rows as $row_id =&gt; $row) : ?&gt;
    &lt;div class="&lt;?php print trim($row_classes[$row_id]); ?&gt;"&gt;
  &lt;?php foreach ($row as $item_id =&gt; $item) : ?&gt;
    &lt;div class="&lt;?php print trim($item['classes']); ?&gt;"&gt;
      &lt;?php print $item['content']; ?&gt;
    &lt;/div&gt;
  &lt;?php endforeach; ?&gt;
  &lt;/div&gt;
  &lt;?php endforeach; ?&gt;
&lt;?php endif; ?&gt;
&lt;/div&gt;
&lt;?php if ($row_id % 1 == 0 &amp;&amp; $row_id !=0): ?&gt;
      &lt;div&gt;
        &lt;?php print views_embed_view('display_random_snippet_home_1', 'block'); ?&gt;
      &lt;/div&gt;
&lt;?php endif; ?&gt;


Although everything appears to be working as designed I have an issue when the Infinite Scroll module loads the first page (always counting from 0.) As you are able to see bellow, when the pager is initiated it loads 12 products pushing down the category block and creating a mess. Also, you can notice that after the first initiation everything works as planned.

You can see the issue reproduced here: http://giphy.com/gifs/l0Ex99XrcsBjynBcY

Or you can reproduce it yourself: mygadgeto.com/infinite

Hope we find a way out of this.
It seems like it is a pure markup error. I should have the statement placed in my main markup. Updated template looks like the snippet bellow.

&lt;?php if (!empty($title)) : ?&gt;
  &lt;h3&gt;&lt;?php print $title; ?&gt;&lt;/h3&gt;
&lt;?php endif; ?&gt;
  &lt;div class="&lt;?php print $classes; ?&gt;"&gt;
&lt;?php if ($options['alignment'] == 'vertical') : ?&gt;
&lt;?php foreach ($columns as $column_id =&gt; $column) : ?&gt;
  &lt;div class="&lt;?php print trim($column_classes[$column_id]); ?&gt;"&gt;
  &lt;?php foreach ($column as $item_id =&gt; $item) : ?&gt;
    &lt;div class="&lt;?php print trim($item['classes']); ?&gt;"&gt;
      &lt;?php print $item['content']; ?&gt;
    &lt;/div&gt;
  &lt;?php endforeach; ?&gt;
  &lt;/div&gt;
&lt;?php endforeach; ?&gt;
&lt;?php else : ?&gt;
  &lt;?php foreach ($rows as $row_id =&gt; $row) : ?&gt;
    &lt;div class="&lt;?php print trim($row_classes[$row_id]); ?&gt;"&gt;
  &lt;?php foreach ($row as $item_id =&gt; $item) : ?&gt;
    &lt;div class="&lt;?php print trim($item['classes']); ?&gt;"&gt;
      &lt;?php print $item['content']; ?&gt;
    &lt;/div&gt;
  &lt;?php endforeach; ?&gt;
  &lt;/div&gt;
  &lt;?php endforeach; ?&gt;
&lt;?php endif; ?&gt;
&lt;?php if ($row_id % 2 == 0 &amp;&amp; $row_id !=0): ?&gt;
      &lt;div&gt;
        &lt;?php print views_embed_view('display_random_snippet_home_1', 'block'); ?&gt;
      &lt;/div&gt;
&lt;?php endif; ?&gt;
&lt;/div&gt;