1

複数の画像を含むHTMLページを作成しようとしています。ローカルホストでは正常に動作していますが、インターネット経由でアクセスしている場合、画像の読み込みが非常に遅くなります。画像のURLをスタイリッシュにキャッシュするにはどうすればよいですか？以下のHTMLコードを確認してください。

   <div style="display: block;" class="collection slide-item" id="div1">
    <div class="row collection type1">
        <div class="title">
            TRAVEL DESTINATION<div class="link">
                <a class="seecollection" href="searchdb.aspx?Keyword=travel destination">See Gallery</a></div>
        </div>
        <div class="span12">
            <a href="Search_Details.aspx?Id=1848760&amp;key=0">
                <div class="landscape thumb with_landscape" style="background-image: url(https://d3jpl91pxevbkh.cloudfront.net/imagedb-com/image/upload/1848760.jpg)">
                </div>
            </a>
        </div>
        <div class="span12">
            <div class="row">
                <div class="span4">
                    <a href="Search_Details.aspx?Id=1716438&amp;key=0">
                        <div class="square thumb with_landscape" style="background-image: url(https://d3jpl91pxevbkh.cloudfront.net/imagedb-com/image/upload/1716438.jpg)">
                        </div>
                    </a>
                </div>
                <div class="span4">
                    <a href="Search_Details.aspx?Id=1838282&amp;key=0">
                        <div class="square thumb with_landscape" style="background-image: url(https://d3jpl91pxevbkh.cloudfront.net/imagedb-com/image/upload/1838282.jpg)">
                        </div>
                    </a>
                </div>
                <div class="span4">
                    <a href="Search_Details.aspx?Id=1845302&amp;key=0">
                        <div class="square thumb with_landscape" style="background-image: url(https://d3jpl91pxevbkh.cloudfront.net/imagedb-com/image/upload/1845302.jpg)">
                        </div>
                    </a>
                </div>
            </div>
            <div class="row">
                <div class="span6">
                    <a href="Search_Details.aspx?Id=1717213&amp;key=0">
                        <div class="landscape thumb with_landscape" style="background-image: url(https://d3jpl91pxevbkh.cloudfront.net/imagedb-com/image/upload/1717213.jpg)">
                        </div>
                    </a>
                </div>
                <div class="span6">
                    <a href="Search_Details.aspx?Id=1842423&amp;key=0">
                        <div class="landscape thumb with_landscape" style="background-image: url(https://d3jpl91pxevbkh.cloudfront.net/imagedb-com/image/upload/1842423.jpg)">
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
<div style="display: none;" class="collection slide-item" id="div2">
    <div class="collection slide-item">
        <div class="row collection type4">
            <div class="title">
                HOLI<div class="link">
                    <a class="seecollection" href="searchdb.aspx?Keyword=holi">See Gallery</a></div>
            </div>
            <div class="span6">
                <a href="Search_Details.aspx?Id=1918857&amp;key=0">
                    <div class="landscape thumb with_landscape" style="background-image: url(https://d3jpl91pxevbkh.cloudfront.net/imagedb-com/image/upload/1918857.jpg)">
                    </div>
                </a><a href="Search_Details.aspx?Id=1869141&amp;key=0">
                    <div class="landscape thumb with_landscape" style="background-image: url(https://d3jpl91pxevbkh.cloudfront.net/imagedb-com/image/upload/1869141.jpg)">
                    </div>
                </a>
            </div>
            <div class="span12">
                <a href="Search_Details.aspx?Id=1888875&amp;key=0">
                    <div class="landscape thumb with_landscape" style="background-image: url(https://d3jpl91pxevbkh.cloudfront.net/imagedb-com/image/upload/1888875.jpg)">
                    </div>
                </a>
            </div>
            <div class="span6">
                <a href="Search_Details.aspx?Id=1888899&amp;key=0">
                    <div class="landscape thumb with_landscape" style="background-image: url(https://d3jpl91pxevbkh.cloudfront.net/imagedb-com/image/upload/1888899.jpg)">
                    </div>
                </a><a href="Search_Details.aspx?Id=1918847&amp;key=0">
                    <div class="landscape thumb with_landscape" style="background-image: url(https://d3jpl91pxevbkh.cloudfront.net/imagedb-com/image/upload/1918847.jpg)">
                    </div>
                </a>
            </div>
        </div>
    </div>
</div>
4

4 に答える 4

1

一部のユーザーは定期的にキャッシュを無効にしたり、キャッシュをクリアしたりする可能性があるため、ブラウザがすべてこれを行います。ブラウザに完全に依存します。

于 2013-02-27T06:49:54.423 に答える
0

これはパフォーマンスの問題であるため、解決する方法はいくつかあります。

最初に画像を見て、特に画像のサイズとフォーマットを見てください。目的は、最も適切な形式を使用し、画像サイズを小さくすることです。

それらの画像は写真ですか、それともグラフィックですか?

写真の場合は、jpeg 圧縮レベルを試して、品質とサイズのトレードオフを見つけてください。

グラフィックの場合は、png 形式に変換してみてください。

オンラインまたはスタンドアロンのユーティリティを使用してメタ情報を削除し、結果としてサイズを縮小し、おそらくいくつかの個人情報を削除できるため、画像にメタデータ (写真のカメラ情報、画像が撮影された場所の座標など) が含まれているかどうかを確認してください。

フォーマット、目的、および画像が変更される頻度に応じて、それらをスプライト (すべての画像を保持する 1 つの画像) に結合できます。css を使用して、スプライトから必要な画像を取得できます。この場合、Web サイトのパフォーマンスの最適化を行うよりも、目的の 1 つであるサーバーへの呼び出しの量を節約できます。古いブラウザーでは、サーバーに対して実行できる並列呼び出しの数に制限があります (ブラウザーによっては 2 - 4)。その結果、前の実行が完了するまで多くの呼び出しがブロックされます。

画像が十分に小さい場合は、Data URI プロトコルを使用して画像を html または css に埋め込むことができます。

また、JavaScript を使用して画像が必要になる前にプリロードすることもできます。これにより、ブラウザはバックグラウンドで画像をダウンロードし、すぐにキャッシュから画像が読み込まれることを示します。

于 2013-02-27T07:17:23.317 に答える
0

使用している画像はかなり大きいです。ダウンロード プロセスを高速化するために、より小さい画像を使用することを検討してください (もちろん、デザインにもよりますが、3*900 ピクセルの幅が必要かどうかは疑問です)。

于 2013-02-27T06:53:03.340 に答える
0

CSS を外部スタイルシートに移動したい場合があります。最新のブラウザのほとんどは、将来の参照のためにこれをキャッシュします。現状では、使用しているブラウザーと、すべてのインライン css の解析方法によっては、一貫性のないキャッシュ結果が得られる場合があります。

于 2013-02-27T06:53:21.093 に答える