遅延読み込みの最初の試み（埋め込まれたYouTube動画の読み込みを延期する） - これをもっとうまくいくにはどうしたらいいですか？

Question

昨日私のウェブサイトがYouTubeの動画をアップロードする方法を改善することを決めました。場合によっては、1ページに30本の動画がある場合があります。この場合、読み込みに時間がかかることがあります。

これは私が何の「遅延ロード」の方法を試みたてきた、と私はそれを求めても価値があるだろう考え出し初めて：

私はこれを改善するために何ができますか？

私はそれをもう少し優雅にすることができますか？

これは遅延ロードのポイントを完全に欠いていますか？

JSFiddle。

ここではスタイリングは無視されます。

---

これが機能する方法は、最初のビデオのIDを含むページ上のアンカーを置くことである：

<a href="#" data-video="FzRH3iTQPrk" class="youtube-video"> 

背後にjQueryは、すべてのa.youtube-videoをループし、などの動画のサムネイルと透明スパンを作成しますその背景：

$('a.youtube-video').each(function() { 
    var videoId = $(this).attr('data-video'); 
    var videoThumbnail = "http://img.youtube.com/vi/" + videoId + "/0.jpg"; 

    var videoBackground = $('<span class="youtube-thumbnail"></span>'); 

    videoBackground.css({ 
     background:"#fff url('"+videoThumbnail+"') no-repeat" 
    }) 
    ... 

アンカータグのスタイリングを変更します（これは、JavaScriptを使用してブラウザに影響を与えないようにするために行われます）。 ）無効：

$(this).css({ 
     height:315, 
     width:460, 
     position:"relative", 
     display:"block", 
     textAlign:"center", 
     color:"#fff", 
     fontSize:26 
    }); 

次いでそれをアンカーにスパンを追加することによって、ループを終了：

$(this).text('Click to load video'); 
    $(this).append(videoBackground); 
}); 

埋め込まれたYouTubeのビデオオブジェクトの読み込みは、アンカークリックで発生します

$('a.youtube-video').click(function(e) { 
    e.preventDefault(); 
    var videoId = $(this).attr('data-video'); 
    var videoThumbnail = "http://img.youtube.com/vi/" + videoId + "/0.jpg"; 
    var videoEmbed = $('<object> ... </object>');  
     ... 

これは、アンカーの親に埋め込みコードを追加してアンカーを削除することで終了します。

$(this).parent().append(videoEmbed); 
    $(this).hide(); 
}); 

Answer 1

hrefを設定して、人々が読み込まれる内容を知っているようにする必要があります。これは、ページが生成されるとき、またはJSでa要素で実行できます。 Javascriptを無効にしているユーザーのためにページを機能させるには、要素上にある必要があります。

var url = "http://www.youtube.com/watch?v=" + videoId; 
$(this).attr('href', url); 

あなたはまた、彼らはタイトルを設定することにより、いずれかをクリックした場合に何が起こるか人々に伝える必要があります。

$(this).attr('title', "Click to play video"); 

またはオンクリックすること、それがより明確になりSMHのもののようなオーバーレイを作成することによってを画像が動画を再生します。または両方。

また、ユーザーがCtrlキーまたはCommandキーを押したままにすると、新しいウィンドウで開かれているものを破損しないようにしてください。私はfiddleを更新しますが、基本的にはあなたのクリックイベントに次のものが必要です。

var isCtrlPressed = e.ctrlKey || e.metaKey; 
if (isCtrlPressed == true){ 
    return; 
} 

は、私が知っているスタイルを無視すると述べたが、プレースホルダは、ページの背景とは明らかに異なる背景色を持っている場合、私はそれを好みます。ページの読み込みが遅い場合は、ページが空白になっているのではなく、何かが読み込まれることがあります。

これは完全に繰延荷重のポイントを欠場していますか？

完全

ないが、それはこの場合は少し無意味です。遅延ロードは通常、読み込まれているものが非常に複雑な場合（例：大量のテーブル）、ページサイズに大幅に追加されるため、ユーザーがリンクをたどってからページの初期レンダリングに長い時間がかかる。

YouTube動画の読み込みが遅いかもしれませんが、残りのページを読み込んでレンダリングすることを実際にブロックしてはいけません。そのため、動画の読み込みを遅らせるだけでかなりの作業が可能になります。

私はあなたが誰かは、ページを表示する最下部までスクロールして、最後のビデオを再生するためにクリックすることができますどのくらいの速測定する必要がありますね。遅延ローディングが速い場合は、他のビデオのFlash Playerがロードされていないため、まだ価値がある可能性があります。

Answer 2

以下のコードhereのjsfiddleがあります。 （プレーヤーが正しく表示されない、私はjsfiddleが "埋め込みメソッド"でうまく動作しないと思う。iframeメソッドを使用してjsfiddleで動作することがわかっているが、iframeを避けたいと述べた。

一つの大きな改善は、すでに述べたように、プレーヤーの埋め込みを生成するswfobjectを使用することです。このメソッドを使用する場合は、player要素のプレースホルダを作成する必要があります。リンクをクリックするとプレースホルダが削除され、埋め込みコードに置き換えられます。 リンクとプレーヤーの親divを作成することを強くお勧めします。埋め込みが生成されているときに要素のサイズ変更を防止するには、コンテナ要素の幅と高さを明示的に設定する必要があります。

私はこれが遅延読み込みをうまく利用していると思います。 Flash Playerは負荷をブロックしませんが、まだ多くのリソースを使用しており、最初はサムネイルセットとして表示されるページに感謝します。

マークアップ

<script src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"> 
</script> 

<div class="container"> 
    <div id="placeholder_FzRH3iTQPrk"></div> 
    <a href="#" data-video="FzRH3iTQPrk" class="youtube-video"></a> 
</div> 
<div class="container"> 
    <div id="placeholder_go43XeW6Wg4"></div> 
    <a href="#" data-video="go43XeW6Wg4" class="youtube-video"></a> 
</div> 

JavaScriptをあなたがのためにクリックハンドラにvideoThumbnailを使用している何

$(document).ready(function() { 
    $('a.youtube-video').each(function() { 
     var videoId = $(this).attr('data-video'); 
     var videoThumbnail = "http://img.youtube.com/vi/" + videoId + "/0.jpg"; 
     var videoBackground = $('<span class="youtube-thumbnail"></span>'); 
     videoBackground.css({ 
      background:"#fff url('"+videoThumbnail+"') no-repeat" 
     }); 

     // also set the parent container size to prevent flicker 
     $(this).add($(this).parent()).css({ 
      height:315, 
      width:460, 
      position:"relative", 
      display:"block", 
      textAlign:"center", 
      color:"#fff", 
      fontSize:26 
     }); 
     $(this).text('Click to load video'); 
     $(this).append(videoBackground); 
    }); 

    $('a.youtube-video').click(function(e) { 
     e.preventDefault(); 
     var videoId = $(this).attr('data-video'); 
     var params = { allowScriptAccess: "always", allowFullScreen: "true" }; 
     var atts = { id: 'player_'+videoId }; 
     $(this).hide(); 
     swfobject.embedSWF(
      "http://www.youtube.com/v/"+videoId+"?enablejsapi=1&playerapiid=ytplayer&version=3", 
      'placeholder_'+videoId, "460", "315", "8", null, null, params, atts); 

    }); 
});