How to load Facebook content?

Asked

Viewed 875 times

6

How does Facebook do this with loading your page? It uploads content gradually and not all at once like most websites, Stackoverflow is an example that loads once and for all.

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

inserir a descrição da imagem aqui inserir a descrição da imagem aqui

  • 1

    Related: https://answall.com/q/158683/5878

2 answers

11


When it comes to large companies such as Facebook, Google, etc. it is very difficult to conclude how they make their applications. However, I believe it is something very similar to the technique Lazy load, or in a free translation, lazy loading. The technique is to load the page elements only when they enter the user’s visible field, and if the content is large or the user’s connection is slow, the upload is done asynchronously. An AJAX request is made and displays the element only when it has the content fully loaded. One caution that is always well discussed in this case is to not keep the user screen blank while the request is being made, as the same may find that the page is not responding and close. To get around this, a much lighter version of 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 the site, but this image is giant, 4k, with resolution 7680 4320, it will usually take a while to fully upload. Then we can edit the image, generating a much lighter version, 600 338, reducing the pixel density to the maximum, so that we can display it while the original is loaded. For comparison purposes, the original image has a size of 1 MB, while the reduced 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>
<img src="data:image/png;base64,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" />

In the above example, I display the low-resolution image along with the page, encoded in base 64 precisely to be a string and be transferred along with the page and not through an extra request. When the whole DOM is loaded, I make an asynchronous call to search for the original image. When this one’s ready, I’ll display it, doing a little animation fade so that the replacement is not so sudden.

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


Note on Arrow functions

The rating used () => {} is called Arrow functions, introduced in Ecmascript standard 2015 (ES6), and is basically a new way to define anonymous functions.

Do, in jQuery:

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

Is the same as:

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

As is usually done.

If you want to read more about:

  • What $(() => { and () = { do? What would they be?

  • 1

    I added a note at the end of the reply on this.

  • 1

    @Andersoncarloswoss in reality , there is a difference yes... Enaqunto in a function (){ } the this refers to who sent it, in an Arrow Function o this will always be the object window. There is a stackoverflow thread here -> http://stackoverflow.com/questions/22939130/when-should-i-use-arrow-functions-in-ecmascript-6 .

  • 2

    @I'mBlueDaBaDee, Yes, indeed. I did not want to get into this merit because in the answer nor did I use the this, then they worked as anonymous functions. I passed a link to if the AP wanted to study more, but thanks for the comment. I’ll embed your link in the reply.

0

There are several ways to do this, but all the facebook homepage is loaded through ajax and PHP I believe, good at least was. Where simplistically and just as an example it takes the div or Section that contains the posts, and if the end of this div divEmSi.getBoundingClientect().bottom is less than the end of the window interior window.innerHeight + window.innerHeight / 2 Obs: the sum would be for it to always load a little before arriving at the end, load the posts coming in ajax from the database. obviously I simplified an extremely giant code with more functionality and performance, more and basically.

If you are referring to animation, and all done with css.

And if you are referring to Lazy-Loader that would be to load any content only when it is visible on the screen this technique is called Lazy-loading. There are also various ways to do it. An example:

function lazyLoad() {
        let lazyImage = document.querySelectorAll('.lazy_img');
        addEventListener("scroll", function () {
            lazyImage.forEach(element => {
                let elementS = element.getBoundingClientRect().top,
                    elementDv = window.innerHeight + window.innerHeight / 2;
                if (elementS < elementDv && elementS > 0) {
                    element.src = element.getAttribute('data-src');
                }
            });

        }, true)

    }
    lazyLoad();

Browser other questions tagged

You are not signed in. Login or sign up in order to post.