css - 跳过在小屏幕上下载图像

Question

在这样的页面上，我展示了将出现在音乐节上的艺术家列表。在小屏幕尺寸（例如手机）上，艺术家图像通过媒体查询规则隐藏：

@media (max-width: 480px) {
    .artistEntry img {
        display: none;
    }
}

为了加快页面渲染速度，减少页面内容量。但是，AFAIK，图像仍将被下载，因此页面加载时间在小型设备上相当缓慢。有没有办法防止图像在小屏幕上下载？

Answer 1

我喜欢@joe 关于背景图片的建议。如果这不适合您的网站，另一种可能适合您的方法是自适应图像

它将根据用户的视口和您设置的断点自动调整图像大小。如果它对您有用，您将获得两全其美……您可以为移动用户保留图像，并且您可以获得更快的下载

祝你好运！

更新

更详细地查看您的页面，我认为问题主要在于您有很多图像，并且由于您没有在页面 HTML 中定义图像大小，因此浏览器必须先下载所有图像缩略图并确定它们的大小它可以开始布局页面。在我的测试中，页面开始渲染大约需要 12 秒。

我有两个想法可以加快速度。

包括所有艺术家缩略图的图像尺寸。这样做会使页面更早地开始渲染。

或者，不是默认显示所有艺术家，我想知道你是否可以让 isotope 为你做一些繁重的工作。如果您默认只显示标题艺术家，我有理由相信这会将感知的页面速度提高约 50%。您可以通过更改 HTML 的这一部分来检查

<div class="spacer" id="lineup-filter">
<h4>Filter Lineup by Artist</h4>
<label class="lineup-toggle">
<input type="radio" name="lineup"  id="all-artists">Show All Artists</label>

<label class="lineup-toggle">
<input type="radio" name="lineup" checked="checked" id="headline-artists-only">Show Headline Artists Only</label>

</div>