日記スマートフォン用の表示で見るあらかじめ日記2chまとめサイト「ソノウソホント?」の雑記と、ブログで使えるスクリプトとかテクニックとか。その他、音楽やアニメ、漫画の話題とかも。この広告は、90日以上更新していないブログに表示しています。2015-05-23【JavaScript】YouTube動画だらけの重たいページを回避しよう【jQuery】プログラミングYouTubeの動画をブログに張りたい時、ありますよね。その場合、YouTubeの動画ページにある貼り付け用のコードを利用すると思いますが、iframeなのでその先の動画の読み込みを行います。1つや2つやくらいなら気になりませんが、「おすすめの音楽紹介!」見たいな感じで1ページにペタペタ張ってるページをしばしば見かけます。これ、重たくて結構イライラしませんか?iframeなのでページ全体の読み込みが止まることはありませんが、それでも読み込みにブラウザの処理が占有されてフリーズしたみたいに重たくなることがあります。※実際、自分も最初にそのようなページを作った時はあまりの重さにビックリして、これはいかんと、この対策に乗り出した訳です。見てもらう人のためにも、ちょっとした工夫でページを軽くしてみましょう。リンクタグのみにするサイトのページをリンクだけにする方法。これが一番簡単で、読み込みは行わないので当然軽いです。Maliceでも少し味気ないですね。リンク+サムネイルで表示するYouTubeは動画のサムネイル画像が存在しており、そのアドレスは「http://img.youtube.com/vi/動画のID/ファイル種類.jpg」となっています。これをimgタグで設定しておけばサムネイル表示ができる訳ですね。ファイルの種類は以下が利用できます。(1280x720)動画が対応している画質に応じて作成されているので、全ての種類が参照できるわけではありません。mqdefaultならほぼ大丈夫だと思います。サイズ的にこれくらいが丁度良いですね。動画IDは動画サイトURLのwatch?v=から先の文字列がそれに当たります。こんな感じになります。Maliceこれだけでも、かなり見栄えはよくなりました。クリックしたら読み込むようにするサムネイル表示を加えるだけでも十分な感じもありますが、動画を見るためには別ページに移動する必要があります。jQueryを使ってクリックしたらそのページのまま動画を読み込むようにして見ます。前準備として対象のサムネイルを識別できるようにしておきます。/></div>先ほどのサムネイルを、識別できるようにclass属性を付けたdiv要素で囲みます。後は、以下のスクリプトをhead内に定義します。});});※jQueryライブラリ(jquery.js)の読み込みはお忘れなく。先述の前準備で設定したタグがクリックされたら、img要素をiframe要素で置き換えるスクリプトです。正規表現で"/"もしくは"="に続く、11桁のハイフン+アンダースコアを含むどの英数字を抜き出して、それをiframeのsrc属性に繋げてタグを置き換えています。リンク月別アーカイブはてなブログをはじめよう!allthewayfromさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。