タグ別アーカイブ: javascript

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

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

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

document.write()を止めるためにはFriendly iFrameを使うのが良さそう

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

続きを読む document.write()を止めるためにはFriendly iFrameを使うのが良さそう

【AdSecnce】1ページに複数の広告コードがあっても、scriptタグは一つでOK

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

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

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

参考: https://support.google.com/adsense/answer/3221666?hl=ja

DOM Elementのid要素がjavascriptのグローバル変数にマッピングされる

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

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

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

[object HTMLDivElement]

が、出力されます。

続きを読む DOM Elementのid要素がjavascriptのグローバル変数にマッピングされる

jQueryで画像の遅延ロード

ここからコピペ

【作者側の対策:JavaScriptで画像の読み込みタイミングをずらす】
http://www.appelsiini.net/projects/lazyload
ここの minified から jquery.lazyload.mini.js をダウンロード
http://jquery.com/
ここから jquery-1.3.2.min.js をダウンロード
自分のサイトに置いてください。
自分のページの<head> ~~ </head>で囲まれた部分に次の行を挿入する
=====ここから=====
<script type=”text/javascript” src=”http://あんたのサイト/jquery-1.3.2.min.js”></script>
<script type=”text/javascript” src=”http://あんたのサイト/jquery.lazyload.mini.js”></script>
<script type=”text/javascript”>
$(function() { $(“img”).lazyload(); });
</script>
=====ここまで=====
これで、画像のダウンロードは一時的に保留され、ページスクロールして
画面内に画像が入った瞬間に読み込まれるようになります。
※IMGタグは <img src=”hoge.jpg” width=”600″ height=”800″> のように
画像の縦横サイズを指定しておくとよいでしょう。