レイジーロードを使用せずに画像をすばやく読み込むにはどうすればよいですか？

Question

私は写真家ですが、最近私のポートフォリオを表示するために私のウェブサイトを1ページのレイアウトに改訂しました。私はHTML/CSS/Jqueryを使ってサイトを構築しています。現在のフォーマットでは、ページスクロール機能を使用してあるセクションから別のセクションに移動しています。これがうまくいくようになっていますが、ページには永遠に負荷がかかります。私はいくつかの研究を行い、遅延ローダーなどについて学んだが、問題はCSSやJqueryに慣れていないということだ。私はHTMLで大丈夫です。私は通常、いくつかの例を取っ​​て、それを私の要求に従ってtweekします。この制約のため、私は遅延ローダーを実装することができません。これを行う簡単な方法はありますか？

さらに、ユーザーがあるセクションから別のセクションにジャンプした場合、自動スクロール中に画像が表示されるようにするため、ロード時には必要なく、イメージをすばやく読み込みたいと思います。

これは私のウェブサイトである - http://www.thekite.in

任意のアイデアや提案を参考になります。

Answer 1

私は実際に訪問者が何かを見る前にもっと長く待つので、ロードアニメーションを削除します。

あなたは本当にあなたがページ上にあるすべてのJavaScriptを必要としていますか？その場合は、ファイルをマージして、ページの一番下に移動できるスクリプトを移動する必要があります。

ページには、合計22MBのリソースが166個あります。

ブラウザのみ（最も近代的なブラウザでは6）を同時に接続の限られた数を開くことができ

（jpegmini.comのようなものが、このために非常に便利である）ページがあまりにも大きい画像を最適化、複数のドメインにまたがって画像を断片化する必要があります。 http://images1 ...、 http://images2など

これ以外のものは、目に見えるものによっては怠惰に読み込むことができますが、最初は上記から始めます。

Answer 2

迅速なGoogle検索はそれに私をもたらした：あなたはまた、あなたのイメージのクライアント側（ブラウザ）のキャッシングを検討すべきである

http://www.appelsiini.net/projects/lazyloadあなたはこの怠惰ローダはオプションであるかもしれないjqueryのを使用しているので

... 。あなたのウェブサーバがあなたのイメージに適切なHTTPキャッシュヘッダを追加するとき、ブラウザはそれらを複数回ロードする必要はありません。あなたのパフォーマンスのボトルネックがどこにあるか

確認するには、YSlowのをチェックアウト：http://developer.yahoo.com/yslow/

それはあなたのウェブサイトのパフォーマンスを向上させることができますブラウザのプラグインです。