「javascript」タグアーカイブ

appendChild()ではなくinsertBefore()を使ってスクリプトをロードするのはなぜ？

Google Analyticsのコードが使っているような、サードパーティのスクリプトを非同期にロードする方法を「createElement-insertBeforeパターン」と言うことくらいは知っていました。けど、ふと「なんでappendChildじゃ駄目なんだ？」と思って調べたのでメモ。

Chromeの開発者ツールを開くとコンソールに何か出てるな。というのは気になってたんだけど、スルーしてたらこんな投稿があることを教えてもらった。
「遅い通信だとChromeはdocument.writeで外部のスクリプトを読み込んでも動かなくなるらしい(A Parser-blocking, cross-origin script …)」

async属性がついているとはいえ、重複したscriptは少ない方がパフォーマンスは良いでしょうと思い調べてみた。

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

の部分は一つでOKということなので、ページ最下部に一つだけにしてみた。
今のところ問題なさそうです。

HTML5の仕様らしいんですが、知らなくてハマりました…

<div id="tweets">
 <script>
   if (typeof(tweets) != 'undefined'){
     document.write(tweets);
   }
  </script>
</div>

というのがあったとして、”何も出力されない”ことを期待していたんだけど、

[object HTMLDivElement]

が、出力されます。

ここからコピペ

【作者側の対策：JavaScriptで画像の読み込みタイミングをずらす】

http://www.appelsiini.net/projects/lazyload

ここの minified から jquery.lazyload.mini.js をダウンロード

http://jquery.com/

ここから jquery-1.3.2.min.js をダウンロード

自分のサイトに置いてください。

自分のページの<head> ～～ </head>で囲まれた部分に次の行を挿入する

=====ここから=====

$(function() { $(“img”).lazyload(); });

</script>

=====ここまで=====

これで、画像のダウンロードは一時的に保留され、ページスクロールして

画面内に画像が入った瞬間に読み込まれるようになります。

※IMGタグは <img src=”hoge.jpg” width=”600″ height=”800″> のように

画像の縦横サイズを指定しておくとよいでしょう。