Question

我正在尝试创建一个包含多个图像的HTML页面。它与localhost工作正常，但如果我通过互联网访问，图像加载速度非常慢。如何在样式中缓存图像网址？请检查以下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>

Answer 1

您不必关心缓存，浏览器会为您完成所有这些操作，而且完全取决于浏览器，因为某些用户可能会定期禁用缓存或清除缓存。

Answer 2

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

Answer 3

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

Answer 4

由于这是一个性能问题，有几种方法可以解决它。

首先要看一下图像，特别是图像的大小和格式。目的是使用最合适的格式并减小图像大小。

这些图片是照片还是图片？

如果是照片，请尝试使用jpeg压缩级别，并在质量和大小之间找到折衷方案。

如果图形尝试转换为png格式。

您是否检查过图像中是否有元数据（如照片相机信息，拍摄图像的位置坐标等），因为您可以使用在线或独立实用程序删除元信息，从而减小尺寸并可能删除一些个人信息

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

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

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

我如何在样式中缓存图片网址？

4 个答案: