スマホ開発時の JS 配置について
画像などのコンテンツを すべて読み込んでから、
JS を動作させたいという場合があります。
( JS 動作が先だと、空のコンテンツのため、崩れる )
そういったときに、
開発環境が高速回線だと、崩れる現象が見えないので
気にならないのですが、
実際の利用環境では、デバイスによって、
・アンテナが、シングルだったりデュアルだったり、
・回線が 3Gだったり、LTEだったりと、
まちまちなので、
低速な環境を想定した上で、行っておきたいのですね。
================
1、
コンテンツの読み込みを先にさせるため、
jQueryの 通常のファンクションを変更する。
$(function() { ・・・
ロードしてから ( ページがすべて読み込まれてから関数実行 ) に変更する。
$(window).load(function(){ ・・・
2、
読ませる順序を意識することでスムーズにさせる。
head 内に 置かないで、
body 閉じタグ直前に JS を下ろしてやる。
3、
JS を なるべく一つのファイルにして、さらに圧縮をかける。
4、
CSSの参照タグを JS の参照タグよりも先に記述する、
5、
favicon.icoを設置する。
ブラウザはバックグラウンドで favicon.icoを要求してきている。
さっさとキャッシュさせておく。
==================
JS 内部コーディングの高速化は別途。
追記 : イメージーズローデッドをつかう書き方もありました。
$("#XXXXX").imagesLoaded( function(){
//ロード完了後の処理
});