How to make a page appear smoothly?

Question

css

It would be desirable that when loading the page - all elements smoothly appeared or the page seemed to pop up. How is this implemented, please?

Answer 1

1) Get an array (or html attribute) from url to images. In this case, the browser will not download them.
2) Create an invisible img element that will serve as a preloader.
3) Bind the JQ .load method to it
4) When scrolling the page to a certain image, we pass the url of the image to the application loader.
5) As soon as he answers us, put this url in src or background-image.
You can create several preloaders, or generate them if necessary, and then delete them.
---------------
If you need something to load the entire page, then you can make a div:

.loader {
  postition: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;

  background: red;

  z-index: 99999;
}

Next, we hang the handler on the window

$(window).ready ->
  $('.loader').remove()

In this case, the site will appear only after all elements are loaded and drawn.

Answer 2

There is a plugin (it is paid).
ilyabirman.ru/projects/emerge