スマートフォンでのajax遅延読み込み

Question

対象端末：
iphone6 ios8,9

【やりたいこと】
スマホで1ページに大量にDOM要素を読み込ませたいです。（縦長ページ）

【問題点】
1ページに配置する要素がある一定の数になるとブラウザが強制終了されてしまいます。

【やってみたこと】
ページ下部の「もっと見る」ボタンクリックでajax通信し要素を取得。htmlに追加する。
↓
静的にDOMを読み込ませたときと同様に、要素数が一定以上になるとブラウザが強制終了されます。

【気になっている点】
画像の数は多いです。容量は1MB以上あります。
リクエスト数も数十以上です。仕様上、spriteシートにすることが不可能な状態です。

【質問】
スマホブラウザ（chrome,safari,Androidブラウザなど）では、1ページに表示できる要素数には限界があるのでしょうか。
縦長ページを作ることは不可能でしょうか。

Answer 1

性格な数は探すことができませんでしたが、facebookの無限スクロールのようなものを実装する場合、メモリを開放していかないとsafariはメモリ不足で落ちてしまいます。
仮にajaxでDomやimageを追加していくなら、見えていない場所の画像のsrcを抜いたりして、再度見えるように鳴るタイミングでレンダリングしていくなどの対応が必要かと思います！

Comments

[mtk03]

ご回答有難うございます！
とても分かりやすく説明していただき、本当に有難いです。
要素を読み込ませることでメモリが増えていくのですね。
頭にありませんでした。。
直近でも、今後としても、とても為になることを教えていただきました。

そして対策まで！
教えていただいたことを元に、しっかりしたロジックが組めるように邁進していきます！
本当に助かりました～！

[MasakazuFukami]

そう言っていただけると答えた側としても非常に嬉しいです！（笑）

僕もまだまだですがお互い頑張りましょう！