1

我正在尝试创建一个包含多个图像的 HTML 页面。它在本地主机上运行良好，但如果我通过互联网访问，图像加载速度非常慢。如何以样式缓存图片网址？请检查以下 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 格式。

您是否检查图像内部是否有元数据（例如照片相机信息、拍摄图像的位置坐标等），因为您可以使用在线或独立实用程序删除元信息，结果会减小大小并可能删除一些个人信息。

根据格式、目的和更改图像的频率，您可以将它们组合成精灵（一张包含所有图像的图像）。您可以使用 css 从精灵中获取所需的图像。在这种情况下，您可以节省对服务器的调用量，这是您进行网站性能优化的目标之一。旧浏览器对它们可以对服务器执行的并行调用数量有限制（2 - 4 取决于浏览器），因此您的许多调用将被阻止，直到之前的执行完成。

如果您的图像足够小，您可以使用 Data URI 协议将图像嵌入到 html 或 css 中。

您还可以使用 javascript 在需要之前预加载图像，因此浏览器将在后台下载它们，然后时间到了，它们将立即从缓存中加载。

于 2013-02-27T07:17:23.317 回答
0

您使用的图像相当大。考虑使用较小的图像来加快下载过程（当然，取决于您的设计，但我怀疑您是否需要 3*900px 的宽度）。

于 2013-02-27T06:53:03.340 回答
0

您可能希望将您的 css 移动到外部样式表中。大多数现代浏览器将缓存它以供将来参考。就目前而言，您可能会得到不一致的缓存结果，具体取决于您使用的浏览器以及它如何解析所有内联 css。

于 2013-02-27T06:53:21.093 回答