6
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:
Related: https://answall.com/q/158683/5878
– Woss