tudou ホームページの読み込み遅延の影響に関する簡単な説明 photos_javascript スキル

もちろん、この利点は、ユーザーが以下のコンテンツを表示する必要がない場合、以下のすべての写真を要求する必要がなくなることであり、サーバーへの負荷を軽減するのに非常に役立ちます。
実装:
実際、tudou の実装原理は非常に簡単です。
1. まず、遅延ロードする必要があるすべての画像の src を、小さな画像 (スプライト) と同じ接続に設定します。 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; -s>0&&r-TUI.pos.windowHeight()< s){
q.init()
}else{
q.stop()
}
}
if(!h||s<590){return true}
TUI.widget.quickPlaylist.load();
o(); window).bind("scroll",o);


Tudou の JS は圧縮され、難読化されています。かなり面倒そうに見えますが、原理は誰もが知っています。
例:
ここまで述べてきましたが、結局のところ、百聞は一見に如かずです。

コードをコピー

コードは次のとおりです: .org/1999/xhtml"> ;head>

あなた画像を見ることができます:

最初は画像が表示されません:

<スクリプトtype="text/javascript">
var hasShow = false;
$(window).bind("scroll",function() {
if(hasShow==true){
$ (window).unbind("scroll");
return;
}
var t = $(document).scrollTop() ;
if(t>//)スクロールの高さが 50 を超えています。画像を読み込みます。
hasShow = true;
$("#lazyBox .lazyImg").each(function(){
$(this).attr("src",$ (this).attr("alt"));
}
}); html>


上記のコードをコピーしてローカルで実行すると、効果がわかります。