tudou 홈페이지 Pictures_javascript 기술의 로딩 지연 효과에 대한 간략한 토론

물론 이 방법의 장점은 사용자가 아래 콘텐츠를 볼 필요가 없는 경우 아래 사진을 모두 요청하지 않게 되어 서버에 대한 부담을 줄이는 데 매우 도움이 된다는 것입니다.
구현:
사실 tudou의 구현 원리는 매우 간단합니다.
1. 먼저, 지연 로드해야 하는 모든 이미지의 src를 작은 이미지(sprite. gif) 이미지의 링크를 이미지의 alt 속성에 넣으세요. 코드를 보세요:

코드를 복사하세요 코드는 다음과 같습니다.

2. window.scroll 이벤트를 바인딩합니다. 이 경우 Tudou 홈페이지에서 다음 JS를 찾으세요.

코드 복사 코드는 다음과 같습니다.

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);

TUI.widget.quickPlaylist.load() 메소드의 구현을 확인하기 위해 후속 조치를 취하지 않았습니다. 꽤 피곤해 보이지만 원리는 다들 알고 있어요.
예:
위에서 너무 많이 말했지만 결국 예를 드는 것이 더 실용적입니다.

코드 복사 코드는 다음과 같습니다.

.org/1999/xhtml">
< ;head>




당신 사진을 볼 수 있습니다:

처음에는 그림이 보이지 않습니다:

위 코드를 복사하여 로컬에서 실행하면 효과를 확인할 수 있습니다.