Brief analysis of js preload and lazy load

There are two common ways to pre-load a Pre loader: XHR and dynamic insertion of nodes. Dynamic insert node is one of the most simple and most widely asynchronous loading method, and then use the method of dynamic insert node load the file will be executed immediately after loading, the execution of javascript on the one hand, it would take a browser javascript execution process, on the other hand may also change the page structure, and the implementation of CSS change is more likely to make the whole page. The XHR approach does not execute scripts, but because of co-domain constraints

The Lazy loader method is useful for sites with lots of images. Images that are outside the browser's visual area are not loaded until the user has scrolled the page to where they are, which can load faster and save server bandwidth for longer pages with lots of images. JQuery plug-ins also have plug-ins to do this.

In tencent's QQ space and micro blog use such technology to achieve, in a large number of visits to the site, this relatively can reduce the pressure on the server, in the user access to the region and the following content to request. Instead of downloading the entire page at once, there are users waiting for the content to appear.

New Image().src is used in IE to preload the file.
Other browsers do this by dynamically inserting the document.createelement ('object') tag.

Description:
1. New Image(). SRC cannot be used in ff because ff implements a separate cache of images. Neither safari nor chrome appears to be cached.
2. Dynamically inserting the object tag needs to be inserted into the non-head part to trigger the load.
3. Ie7 ie8 can also load files with some code using dynamic object.