I often go to tudou and find that the tudou homepage has an interesting function of loading images. The tudou homepage is from & quot; Entertainment & quot; thumbnails of all videos under this section are not loaded after the page is opened. Instead, you can start loading images only when you drag the scroll bar to the & quot; Entertainment & quot; section. The advantage of this is, of course, that if a user does not need to view the following content, all the image requests are removed, which is helpful for reducing the server pressure.
Implementation:
In fact, the implementation principle of tudou is very simple,
1. First, set the srcks of all delayed images to the connection (sprite.gif) of the same small image, and put the connection of the real image into the alt attribute of the image. The Code under look:
The Code is as follows:
2. Bind the window. scroll event, reset the src value of all images whose classes are lazyImg in the event, and find the following js on the Tudou homepage:
The Code is as follows:
Var o = function (){
Var s = TUI. pos. scrollTop (), q = c;
If (q. box [0]) {
Var r = q. box. offset (). top;
If (r-s> 0 & r-TUI.pos.windowHeight () Q. init ()
} Else {
Q. stop ()
}
}
If (! H | s <590) {return true}
TUI. widget. quickPlaylist. load ();
H = false
};
O ();
$ (Window). bind ("scroll", o );
I have not followed the implementation of The TUI. widget. quickPlaylist. load () method. The JS of tudou is compressed and obfuscated. It looks tired, but you can understand the principle.
Instance:
As mentioned above, it is more practical to come to an instance.
The Code is as follows:
