A brief analysis of js preloading/lazy loading_javascript skills

Pre loader There are generally two common methods of preloading: xhr and dynamically inserting nodes. Dynamically inserting nodes is the simplest and most widespread asynchronous loading method. Then files loaded using the dynamically inserted node method will be executed immediately after loading. On the one hand, the execution of javascript will occupy the browser js execution process, and on the other hand, it may Change the page structure, and the execution of css is more likely to change the entire page. Although the xhr method will not execute the script, due to restrictions in the same domain

Lazy loader method is very useful in some websites with many pictures. Pictures outside the visible area of ​​​​the browser will not be loaded until the user scrolls the page to where they are, so for websites with many pictures For longer web pages, they can load faster and save server bandwidth. There are also plugins in jQuery plugins to implement this functionality.

This technology is used in Tencent’s QQ space and Weibo. On websites with a large number of visits, this can relatively reduce the pressure on the server, and only requests are made when the user accesses the visible area and the following content. Instead of downloading the entire page at once, the user is waiting for the content to be presented during the download process.

Use new Image().src in IE to preload files.
Other browsers use dynamically inserted document.createElement('object') tags to complete loading.

Description:
1. The reason why new Image().src cannot be used in ff is because ff implements a separate cache for images. At the same time, safari and chrome don't seem to be cached.
2. Dynamically inserted object tags need to be inserted into the non-head part to trigger loading.
3. In ie7 and ie8, you can also use dynamic objects to load files through some code.