How to do the Facebook content upload technique?

5

How does Facebook do this by loading your page? It loads the content bit by bit and not all at once like most sites, StackOverflow is an example that loads.

  • How do you call this loading technique? (if you have a name)
  • How can I do it in JavaScript or jQuery?

    
asked by anonymous 19.02.2017 / 22:50

1 answer

11

When it comes to large companies such as Facebook, Google, etc. it is very difficult to conclude how they make their applications. But I think it's a lot like the lazy load technique, or a free translation, lazy loading. The technique is to load the page elements only when they enter the visible field of the user, and if the content is large or the user connection is slow, the loading is done asynchronously. An AJAX request is made and displays the element only when you have the content loaded completely. One caution that is always well discussed in this case is not to keep the user's screen blank while the request is made, as it may feel that the page is not responding and close. To get around this, a slightly lighter version of the content (or generic in the case of Facebook) is usually displayed and replaced when the content itself is ready.

Example

For example, if you want to display an image on your site, but this image is giant, 4k, with a resolution of 7680 × 4320, it will usually take a long time to load completely. Then we can edit the image, generating a much lighter version of 600 × 338, reducing the pixel density to the maximum, so we can display it while the original is loaded. For comparison purposes, the original image has a size of 1 MB, while the reduced size is 8.7 kB, that is, a reduction of 99.9913%.

$(() => {
  
  var img = $("img");
  
  $.get("https://gist.githubusercontent.com/acwoss/aeaf1264e0948bbb0965eed3e8647e31/raw/0c418cd3f4f92d8228637af34c48ed616adc4ab7/tiger4k.png", (data) => {
    img.fadeOut(400, () => {
      img.attr("src", data);
    }).fadeIn(2000);
  });
});
img {
  width: 600px;
  height: 338px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><imgsrc="data:image/png;base64,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" />

In the example above, I display the low-resolution image along with the page, encoded in base 64 just to be a string and be transferred along with the page and not through an extra request. When the entire DOM is loaded, I make an asynchronous call to fetch the original image. When it is ready, I display it, making a small animation fade so that the replacement is not so abrupt.

This technique is very important for pages in a blog, for example, because the user will be able to start reading the text before the images are loaded and, mainly, there will be no variation of the position of the text when they are loaded, because there is the reduced quality version of the image already on the page, occupying exactly the space that the original image will occupy.

Note on arrow functions

The notation used () => {} is called arrow functions , introduced in the ECMAScript 2015 (ES6) standard, and is basically a new way to define anonymous functions.

Do, in jQuery:

$(() => {...});

It's the same as:

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

How it's usually done.

If you want to read more about:

20.02.2017 / 00:14