There are generally two common ways to preload Preloader: xhr and dynamically insert nodes. Dynamic insertion of nodes is the simplest and most extensive asynchronous loading method. Then files loaded using dynamic insertion of nodes will be executed immediately after loading. On the one hand, the execution of javascript will occupy the browser's js execution process, and on the other hand, it may also change the page structure. The execution of css is more likely to make the entire page change. Although the xhr method does not execute scripts, it is due to the limitations of the same domain
The Lazy loader method is very useful in some websites with a lot of pictures. Images outside the browser's visual area will not be loaded until the user scrolls the pages to their location. This way, for longer web pages with many pictures, it can load faster and save server bandwidth. There are also plug-ins in the jQuery plug-in to implement this function.
This technology is used in Tencent’s QQ space and Weibo. In a website with a large number of visits, the pressure on the server can be relatively reduced, and the request will be made only when the user accesses the area you see and the content below. Instead of traditionally downloading the entire page at once, there are users waiting for the content to be presented during the download process.
Use new Image().src in IE to preload files.
Other browsers use dynamically inserting the document.createElement('object') tag to complete the load.
illustrate:
1. The reason why new Image().src cannot be used in ff is because ff implements a separate set of caches for images. At the same time, safari and Chrome don't seem to be cached either.
2. Dynamically insert the object tag needs to be inserted into the non-head part to trigger loading.
3. ie7 ie8 can also use dynamic object to load files through some code.