質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.91%

jqueryを用いてサイトを読み込む量を軽くする目的で1枚のhtmlファイル(もしくはphpで出来たhtmlファイル)を、 無限スクロールなどで数回に分割して読めないか。

解決済

回答 4

投稿

  • 評価
  • クリップ 0
  • VIEW 244

gugupoo

score 28

1ページのhtmlファイルや、phpで作られたhtmlページが重たいので、
いくつかに分割して、スクロールして読み込むことが出来たら良いと思っていました。
例えば5回くらいに分割して読みながらフッターまで行くような感じで。
1度で表示できなくもないですが、少し重いと言えば重いと自分では思っています。

そして分割してスクロールするようなサイトを見たことがあったので
調べてみた所、「無限スクロールの実装」、「もっと見る」などあったのですが、
これらは

で、ネット上を自分で調べてみたところ、
「無限スクロールの実装」、「もっと見る」、のような機能についてはあったのですが、
これは読んだら次のファイルに行くタイプのもの、例えば
a.html    b.html   c.html    d.html    e.html

などの形に5つ用意してそれぞれを読んで進んでいくもの・・と自分なりには解釈しましたが・・

phpやhtmlが先に1枚あったとして、本来はこれを5枚のファイルに分けるべきかもしれませんが、
1枚のファイルの中で、数回でフッターまでたどり着くことは不可能でしょうか?

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 4

+4

1枚のファイルの中で、数回でフッターまでたどり着くことは不可能でしょうか?

よほど特殊な実装をしない限り無理です。ふつうにHTMLにアクセスすれば、まずブラウザがHTMLパースを行いますので、JavaScriptはそこに介入できません。

もっとも、「重たい」ページの重たさの原因がどこにあるかによって対処法は変わってきます。画像が重いのであれば、画像ファイルだけ遅延させることにも効果はあります。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/07/03 15:00

    画像はとても多いとは思えませんでしたが、もちろんありますので、
    今回はいったん PHP for文の繰り返しの数を減らして、
    表示そのものを少し制限することに納得いきましたので
    それでいってみようと思います。有難うございました!

    キャンセル

+2

いくつかに分割して、スクロールして読み込む

maisumakunさんが書かれている通り
1枚を分割して読むのは難しいと思いますし
ファイルを複数に分けて読ませれば
それを呼び出しに行く為のロスが出ます。

重いという事ならば、「分割」の前に

● 画像のスリム化や最適化
● 余計なタグ、cssの重複呼び出し
● scriptなどの移動
● キャッシュの利用

といったファイルそのものの
スリム化軽量化を試されてはいかがでしょう?

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/07/03 14:55

    改めて「分割」作戦も狙うことにしました。有難うございました!

    キャンセル

  • 2020/07/03 14:56

    肝心な間違いをすみません; 改めて「軽量化最適化」を狙うことにしました!

    キャンセル

+2

1枚のHTMLを解釈して適切に分割するのはかなり面倒だと思います
あまりおすすめしません
PHPなどサーバーサイドの処理が可能ならAPIでデータを段階的に送ればよいでしょう

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/07/03 14:52

    1枚からの分割案は普通は用いることは考えない方が良い具合ですね。
    有難うございました!

    キャンセル

checkベストアンサー

0

JavaScriptにしろ、PHPにしろ、遅延ロードはかなり難しい分野になります。
むしろJavaScriptなら、別ファイルを非同期で読み込むなどの方法があるのでまだマシですが、
PHPは出力したものを、ブラウザに返すので、API的に次のファイルを読み込むって形でないと遅延ロードは難しいかと思います。
(出力されてしまっているため、先にパースとレンダリングが走る)

そこで、
template要素を使うことをお勧めします。
これは、DOMとしてパースは行われてしまいますが、
ページロード時にレンダリングを行わないという性質の要素になります。
この要素の中に入った全ての要素、画像はレンダリングが行われないため、
その分速度を担保できます。

あとは、スクロールによって、要素位置付近まできたら、
templateの中身を取り出し、対象のDOM(位置)に出力する、という方法がいいでしょう。
そこまでやらなくても、画像の遅延のみで解決できそうなら、
maisumakunさんのご回答とおり、画像の遅延のみでもいいかと思います。
(実際それだけでもだいぶページ表示速度上がります)
いずれにせよ、JavaScriptでコントロールできます。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.91%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • トップ
  • PHPに関する質問
  • jqueryを用いてサイトを読み込む量を軽くする目的で1枚のhtmlファイル(もしくはphpで出来たhtmlファイル)を、 無限スクロールなどで数回に分割して読めないか。