Quicksand elements looking out of place on initial load [closed]

Question

This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.

Closed 8 years ago.

I'm having a weird issue with quicksand elements on my initial page load. http://bvh.delineamultimedia.com/?page_id=2 -> you may have to refresh a few times before you see what I'm seeing so I posted an image... http://i.imgur.com/026HYeH.png

If you make sure your mouse if off of the page and reload it every now and then the quicksand elements are out of line as shown in the screenshot attached. I've tried debugging this but every time I look at an inspector the elements snap back into place. If anyone could help give me a clue as to why this is happening I'd be grateful!

Thank you!

Answer 1

If you are placing the elements using a jQuery addin then they won't "snap" into place until the page is loaded and the add-in has had a chance to run.

If you have load time issues then the "snap" issue will be prominent.

So, what I would do in this circumstance is to have all the elements hidden, then have jQuery arrange them, and once the page is loaded, show them.

I know that's a fudge but when i was on your site it took a looooong time to load so unless you can reduce that...

edit

$(function(){
  //Your code here.  This ensures page is loaded before this is executed
});

edit 2

Also, consider using thumbnails during the load process or reducing the size of your images.

For example, if you click on an image you get the full sized image loaded via ajax but on the home page you should have a thumbnail which will reduce the size of the page and hence load times