响应网页:防止桌面版本图像在移动分辨率上下载

提问者：小点点

在我的HTML/PHP页面上，我首先有移动HTML块，它隐藏在桌面分辨率上，然后是桌面HTML块，它隐藏在相反的移动分辨率上:

<div class="mobile-version">
    <img src="/images/300.jpg">
</div>  

<div class="desktop-version">
    <img src="/images/90.jpg">
</div>

我正在努力提高我的Google页面速度分数，所以如果用户在移动屏幕宽度上，我不想加载90.jpg。

但是，如果我只是使用style=“display:none”，我可以在chrome开发中看到。浏览器仍在加载图像的工具。

如何处理这件事？

共1个答案

匿名用户

在应用任何CSS之前解释dom。现阶段，我看到两种解决方案:

延迟加载:这将需要JavaScript；您只能在没有有效隐藏的元素上注入src标记。

HTML5图片元素:这个HTML5元素包含和标记。优点是您可以在源元素中应用媒体筛选器，因此只加载在桌面设备上。唯一将始终加载的是回退img src，但这问题较小。