0

Check out http://9gag.com/gag/a3YGLY1 or http://www.memecenter.com/fun/134512/Comma or any Facebook photo gallery

They have this feature where you can navigate through posts with arrow keys. I managed to do this too with javascript, but I don't understand how they can load those new pages so fast!

Are they using AJAX? Prerendering pages? And is there an official name for this feature? I tried searching but can't find anything.

Charlie
  • 11,380
  • 19
  • 83
  • 138
Ming
  • 744
  • 4
  • 13
  • 26

1 Answers1

0

They all preload the next image (Or several, e.g. this post from a Facebook engineer in 2011 says they preload 5 ahead, and 1 back).

You can see it in action by loading one of the sites you mentioned, opening up Developer Tools in Chrome, clicking the "Network" tab, and then selecting to view "Images" only in the bottom.

Each time you load a new page, you'll see one of the future images gets loaded (Particularly obvious on memecenter where all the images have proper names!)

You just need a way of finding out the URLs of the subsequent images, and then you can create DOM elements easily (e.g. this SO answer has tonnes of options)

Community
  • 1
  • 1
Michael Martin
  • 693
  • 5
  • 8
  • But for some reason, my site won't load that fast when I click next/previous. I don't even have images on some of my posts and my PageSpeed score from google is similar. Are you sure they are just preloading the images? Cause it feels like a slider widget when you navigate through those posts. – Ming Dec 28 '13 at 15:38
  • It is similar to a slider widget, yep. They aren't loading whole new pages. They literally just pre-load the image, and then pull it into place on the page the user is already on, then refresh the comments etc. – Michael Martin Jan 04 '14 at 12:37