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

Question

在类似 this one 的页面上我展示了将出现在音乐节上的艺术家名单。在小屏幕尺寸(例如手机)上，艺术家图像使用媒体查询规则隐藏:

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

为了加快页面渲染速度，减少页面内容量。但是，据我所知，图像仍会被下载，因此页面加载时间在小型设备上非常缓慢。有没有办法防止在小屏幕上下载图片？

Answer 1

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

它会根据用户的视口(viewport)和您设置的断点自动调整图像大小。如果它对您有用，那么您将获得两全其美......您可以为移动用户保留图像，而且您可以获得更快的下载速度

祝你好运!

更新

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

我有 2 个想法来加快速度。

包括所有艺术家缩略图的图像尺寸。这样做将使页面更早开始呈现。

或者，我想知道您是否可以让 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>