如何防止桌面站点上的图像在移动设备上加载？
因此，我目前有一个网站，可以根据屏幕尺寸加载两个不同的版本:一个用于桌面，一个用于移动设备。出于某些原因，我在桌面版本的网站上显示的图片会加载到移动版本上。
有没有办法阻止这些图片在移动设备上加载，以提高性能/加载时间？我不是在谈论显示:无；属性/在移动设备上隐藏图像，我试图阻止它们一起加载。
如果你想看看这个网站，这里有个链接：https://rubyredsound.com
回答 4
Stack Overflow用户
发布于 2019-11-28 22:00:56
有没有办法阻止这些图片在移动设备上加载，以提高性能/加载时间？
是。
srcset属性是明确指定的，用于根据上下文下载不同的图像文件。
需要注意的是，您需要为每个环境声明一个映像(或回退)。
但这不会阻止您使用等效于空的图像作为您的备用图像(即。使用base-64 Data URL内联声明的1x1像素透明png)，如下所示：
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==srcset和sizes语法：
完成的<img>元素，以及为桌面和移动环境指定的文件，将如下所示：
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg=="
srcset="/my-image-folder/desktop.png 640w,
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg== 1w"
sizes="(min-width: 641px) 640px,
(max-width: 640px) 1px"
alt="Alternative Text for My Image"
/>仅当浏览器视口宽度为641px或更大时，此<img>元素才会下载并显示desktop.png图像。
否则它将显示一个1x1像素透明的png。
工作示例：
<h2>Narrow and Widen your Browser Viewport in Full Page</h2>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg=="
srcset="https://via.placeholder.com/620x100 620w,
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg== 1w"
sizes="(min-width: 641px) 620px,
(max-width: 640px) 1px"
alt="Alternative Text for My Image"
/>
浏览器支持
有关srcset和sizes属性的最新浏览器支持，请参阅：
更多信息(加上教程)
有关使用srcset和sizes构建Responsive Images的更深入的信息和教程，请参阅：
2021年更新
上面答案中使用的数据URL：
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==它是有效的，但是它有点不稳定，并且非常不清楚它应该代表什么(除非你已经知道它是什么)。
从那以后我意识到：
data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'/%3E同样有效，而且更短，更整洁，更易读。
Stack Overflow用户
发布于 2019-11-28 21:29:14
CSS Media Queries和使用背景图像
通过CSS，你可以在页面加载不活跃的情况下使用prevent background images from loading。记住这一点，你可以在手机上隐藏一张图片(或任何元素)，并开始通过媒体查询来显示它们。
.myMobileImage {
background-image: url(...);
}
.myDesktopImage {
display: none;
}
@media only screen and (min-width: 768px) {
.myMobileImage {
display: none;
}
.myDesktopImage {
display: inline-block;
background-image: url(...);
}
}至于个人偏好，我将移动优先的方法牢记于心，首先声明移动样式，然后用媒体查询覆盖它们，以获得更大的分辨率。
Stack Overflow用户
发布于 2021-01-08 16:33:33
https://stackoverflow.com/questions/59089597
复制相似问题
腾讯云开发者
