A brief discussion on the effect of delayed loading of tudou homepage pictures_javascript skills

The advantage of this is of course that if a user does not need to view the content below, it will avoid requesting all the pictures below, which is very helpful in reducing the pressure on the server.
Implementation:
In fact, the implementation principle of tudou is very simple.
1. First, set the src of all images that need to be delayed loaded to the same connection with a small image (sprite.gif), and really Put the link of the image into the alt attribute of the image. Look at the code:

Copy the code The code is as follows:

2. Bind the window.scroll event. In this event, reset the src value of all images with class lazyImg. Find the following JS on the Tudou homepage:

Copy code 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()< s){
q.init()
}else{
q.stop()
}
}
if(!h||s<590){return true}
TUI.widget.quickPlaylist.load();
h=false
};
o();
$(window).bind("scroll",o);

I didn’t follow up to check the implementation of the TUI.widget.quickPlaylist.load() method. Tudou’s JS is compressed and obfuscated, which looks quite tiring, but everyone knows the principle.
Example:
Having said so much above, it is more practical to give an example. After all, seeing is believing.

Copy code The code is as follows:

.org/1999/xhtml">





You can see the picture:

Picture not visible at first:

Copy the above code to run locally and you can see the effect.