デザイナーが知っておきたいDOMの読み込みとjQuery | スマートフォンアプリ開発会社のエンジニアブログ
こんにちは。ビンゴ豊島です。デザイナーという立場ですがJavaScriptもちょいちょいと書かせていただいております。 今回はDOM操作をする前に知っておきたいDOMの読み込みについて記事を書かせていただきます。対象はDOM操作ばかり、もしくはDOM操作しかしないんですけど？といったデザイナーさんになります。これを読むと今までなんとなく使っていたjQueryも意味を理解した上で使えるようになれるかもしれません。 Webページが表示されるまで ブラウザがページを表示するまで簡単に書くと下記のようになります。 サーバにページをリクエスト サーバから返されたHTMLをダウンロード DOM構築をしつつ描画と画像等のダウンロード 表示完了 このうち「3. DOM構築をしつつ描画とダウンロード」のタイミングでどのような順番でイベントや処理が発生するかを検証します。 DOMの読み込みを確認するサンプルコ
ボーイフレンドを直す方法 あるいは賢いjQuery.Deferredの使い方 - mizchi's blog
問題 モバイルは回線が不安定なので、ロードの失敗が頻繁に起こります。 開発時は高速なwifi環境で開発しているので、リリース間近になって帯域を圧迫していることに気づいたりします。 解決方法 画像を先読みします var preload = function(src){ var d = $.Deferred(); var img = new Image; img.src= src; img.onload = d.resolve img.onerror = d.reject return d.promise(); }; 何をやっているかというと、空のimgタグをつくってそこに画像を読み込みます。その過程でブラウザキャッシュに画像が保存されます。正確に言うとこの時点ではどこにも紐付いていないのでGC対象ですが、その後すぐDOMに画像をはるなら問題ありません。 並列で先読みする(速い・不安定) va
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
