The H5 page is preloaded and then displayed.

see a lot of animated h5 single page display pages, which read the bar first or show the loading percentage when entering the page. Then, after the resource is loaded, the page is actually displayed.

this kind of page is usually a single page with a large number of animations and pictures, switching between scenes like swiper, and each scene has some animation or audio.

how is this preloading function realized and how does it work?

Javascript html5
Nov.22,2021
  1. the main problem that needs to be solved in the preloading interface is that the resource file required by the page is too large, which may cause users to see the page with incomplete display or still loading, thus affecting the experience. Note that most of the preloaded here are pictures, followed by audio, font files, etc. Unless the animation is written in the form of json alone (there is a species in the egret engine), generally there is no need to preload alone, js and css files can be used (of course, it is also right to do so).
  2. take the simplest image preloading as an example, usually use js to new a single image object, then loop into the image URL, and repeat this step in the load callback (load completed) to complete the loading of all images. Specifically, you can take a look at the source code of preloader.js in the concave-convex laboratory. It's very clear.
  3. progress bar there are three ways: false progress bar does not say; the second is to calculate the percentage according to the number of files, of course, the detailed point to do is the percentage, which is similar to the pure character "12Unip 28"; the third is the real loading progress, which is generally loaded with Ajax, because there is a load callback that can be used, such as PxLoader to achieve this.
  4. generally preloaded code can be written in head by Synchronize script, so that it is a normal process to run before the resources in body are loaded; or all resources do not use src but find an alternative attribute (such as to be changed to ) and then change back after js loads. This ensures that there is a certain order and that there is no conflict caused by running and loading on both sides.
    5. The

interface displays loading masks by default.
remove the mask after window.onload.
progress bars are basically fake.
unless you manually calculate the number or size of loaded resources and then convert the percentage.

https://github.com/xkh/preloa. try this js, css, img can all

Previous: Why does css position:fixed use padding to lean to the right as a whole?

Next: Please recommend a text editor that can highlight the same words in the left and right columns.

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b3e39a-2c3ed.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b3e39a-2c3ed.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?