1

私は現在、練習用のレスポンシブ Web サイトを構築しています。私がやっていることは、既存の Web サイトを取得し、twitter ブートストラップ js と css を使用して構築することです。つまり、モバイルに対して完全にレスポンシブになります。

問題は、サイトにいくつかの大きなカルーセルと画像があることです。理想的には、たとえばカルーセルなどの特定の要素を完全に削除し、代わりにカルーセル内に標準のリスト メニューとしてオプションを配置したいと考えています。

主なオプションはdisplay:noneメディアクエリに基づいているようですが、デスクトップサイト全体がまだモバイルにロードされ、要素が非表示になっている場合、ロード時間に大きな問題が発生することが予見され始めています.

ブラウザのサイズに基づいて html を完全に除外する方法はありますか? 誰かが良いリンクや記事を持っていれば、それは素晴らしいことです. または、実際にhtmlを除外する必要があるかどうかについての単なる意見でもあります。

ありがとうございました

4

4 に答える 4

2

まず第一に、あなたが話しているdisplay:none;のは、実際には画像の付加機能なしでコンテンツを表示したいということです。よくやった。

次に注目するのは、モバイル向けに画像をロードしたくない場合、なぜ大規模なサイトに画像を追加するのかということです。画像が機能を提供しておらず、コンテンツをよりよく説明するのに役立っていない場合は、デスクトップのサイズに合わせて削除してみませんか?

実際にストーリーを伝えるのに役立つ場合は、画像と、アダプティブ画像、hiSRC、PictureFillなどの一般的な画像サービスを含めることができます。これらのサービスは、最初に画像のモバイル バージョンを提供し、より高いビューポートでより大きな画像に置き換えます (ただし、帯域幅テストはありません)。

最後に、いくつかの異なるコンテンツを提供したい場合は、ajax を使用してより多くのコンテンツを含めるというアドバイスを受けてください。Filament グループのSouth Street ツールボックスが役に立ちます。特に AjaxInclude パターンに注意してください (picturefill へのリンクもあります)。

于 2013-01-22T12:17:34.700 に答える
2

大量のデータを JSON エンコードして保存し、要素を作成してオンデマンドでロードすることを検討できます。

var heavyImage = new Image();
heavyImage.src=imageList[id];

次に、画像要素を目的のブロックに追加できます。モバイルでの私の経験から、これは AJAX 経由で要求するよりも堅牢です<img>。AJAX はかなり遅い場合があるからです。

また、この方法で画像を「プリフェッチ」することもできます (現時点で 2 ～ 3 が隣接して表示されているように)。これにより、UX が向上します。

于 2013-01-22T12:15:10.600 に答える
1

AJAX を介して重い要素を取り込むことができるため、最初はページに留まらず、読み込みが速くなります。画面サイズが X より大きい場合にのみ、AJAX 呼び出しを実行することを決定できます。

于 2013-01-22T11:57:05.157 に答える
0

必要に応じて使用できますvisibility:hidden。または、jQuery を使用する場合は使用できます。

$(element).remove() //to remove completely
$(element).hide() //to hide 
$(element).fadeOut(1) //to fadeout
于 2013-01-22T11:58:06.670 に答える