CODEWITHSUNDEEP
jquery-masonry
William
William

Reputation: 4578

Masonry / Infinite scroll "jump flickers" on page load when positioned

Preface: Masonry is a JQuery plug in that creates a "brick-style" layout of html pages on one page. Infinite scroll is a plug in that allows for a pintrest-style scrolling of page items.

I have masonary w/ infinite scroll installed here:

http://helpknow.com/black2/

and my problem is this.

I want to position the "container" div to center the entire list of items in the page.

So I use some code like this:

#container {
  left:140px;   // <---- Positioning 
  padding:10px;
  background: #FFF;
  padding: 5px;
  margin-bottom: 20px;
  border-radius: 5px;
  clear: both;
  -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
          border-radius: 5px;

}

The problem is when I do that, upon opening the page there is a quick "flickering jump" where all the masonry items move to their position ( you might not be able to see it on refresh, only on initial page load). I don't want this. I want the items to not "flicker". I want them to appear static until the user scrolls, then I want the animation to take place as expected. When I remove the left positioning this problem does not happen (but obviously the items float left and are not centered, which is not what I want). I tried wrapping the main div "container" and other items in a new div container and moving it/them around and was met with the same problem.

Upvotes: 2

Views: 3291

Answers (1)

Systembolaget
Systembolaget

Reputation: 2514

Have you tried 2, meaning to initialise Masonry when all your content has been loaded? Now, you are doing it as in 1...

1 This executes, when the DOM has been constructed, before all content has been loaded

$(document).ready(function(){ ... });
$(function(){...}); // short form

2 This executes, when all content has been loaded

$(window).load(function(){ ... });

3 This executes immediately, when it is first encountered by the browser

(function(){ ... })();

The latter is a self-executing anonymous function (known as a closure), which is very handy, but not here, because no content or not the right content may have been loaded when it self-executes.

UPDATE Alternatively, you can fade your #container in, which can sometimes look nice, too. See this fiddle here, which does the same with Masonry's bigger brother Isotope.

Upvotes: 2

Related Questions