跳过小屏幕上的图像下载

在像this one这样的页面上，我将显示将出现在节日中的艺术家列表。在小屏幕尺寸（例如手机）的艺术家图像被隐藏与媒体查询规则：跳过小屏幕上的图像下载

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

为了加快页面渲染，减少页面上的内容量。然而，AFAIK，图片仍然会被下载，所以在小型设备上的页面加载时间非常缓慢。有没有办法阻止图像在小屏幕上下载？

来源

2013-05-19 Dónal

希望的这一部分选中这可以帮助你：http://timkadlec.com/2012/04/media-query-asset-downloading-results/ – Joe

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

它会根据您设置的用户视口和断点自动调整图像的大小。如果它能为你工作，你将得到两全其美的效果......你可以为移动用户保留图像，并且你可以获得更快的下载量

祝你好运！

UPDATE

看你的页面更详细，我认为这个问题主要是因为你有大量的图片，并因为你没有定义的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>

来源

2013-05-20 00:12:11

我的图片目前尚未提供服务来自Apache，所以我将无法自己使用这个 –

感谢您的更新 –

跳过小屏幕上的图像下载

回答

相关问题