めも。
http://toddmotto.com/echo-js-simple-javascript-image-lazy-loading/
画像が画面内に表示されてから読み込みを開始出来るため、サイトのレスポンスを高める事ができる。
画像を多様するサービスならSEO的にもユーザービリティ的にも効果絶大。
【Javascript】数字をカッコ良くカウントアップ表示してくれるライブラリ。
メモ。
http://inorganik.github.io/countUp.js/
その名の通り「countup.js」
使ってみると面白い。カッコ良くアニメーションしてくれる。
機会があれば取り入れてみよう。
【Javascript】location.hrefとlocation.replace()の違い。
めも。
■location.href
この変数を用いてリダイレクトを行うとブラウザに履歴が残るためブラウザバックが出来る。
■location.replace()
replace()関数を用いたリダイレクトを行った場合、ブラウザに履歴が残らず元いたページにブラウザバックできなくなる。
下記実装例。
<button onclick="location.href='http://www.yahoo.co.jp'">load</button>
<button onclick="location.replace('http://www.yahoo.co.jp')">load</button>
【Javascript】Javascriptが実行できない環境でのみリダイレクトを行う。
メモ。
headタグ内にnoscriptタグを記述し、その中でmetaタグのリダイレクトを記述してやればよい。
<noscript> <meta http-equiv="refresh" content="0; URL=http://example.com" /> </noscript>
【Javascript】関数が存在するかチェックする。
めも。
if(typeof funcname == 'function') {
// 関数が存在する場合の処理
}
処理中のみならず、例えば表示されているページでjQueryが読み込まれているかどうか確認したい場合は下記コマンドをデバッグコンソールで実行すれば良い。
typeof $ == 'function' // もしくは typeof jQuery == 'function'
【Javascript】selectorAPIで取得したinput要素を操作する。
メモ。
// 要素を取得して
var input = document.querySelector('*[name="user"]');
// 値を設定してみる
input.value = 'hogehoge';
// select要素も上記のようにvalue属性を設定してやればOK
var select = document.querySelector('select');
// 値を設定
select.value = 1234;
// submit要素を取得してデータを送信したい場合
var submit = document.querySelector('input[type="submit"]');
// 下記のようにsubmitする。
submit.form.submit();