Question

在像this one这样的页面上，我展示了一个将出现在音乐节上的艺术家名单。在小屏幕尺寸（例如手机）上，艺术家图像被隐藏在媒体查询规则中：

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

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

Answer 1

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

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

祝你好运！

更新

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

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

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

或者，我不知道是否可以让同位素为你做一些繁重的工作，而不是默认显示所有的艺术家。如果你默认只显示标题艺术家，我相当肯定这会使得受影响的页面速度提高约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>

跳过在小屏幕上下载图像

1 个答案: