不推荐使用的图像的 lowsrc 的最佳替代方法是什么？
[英]What is the best alternative to the deprecated lowsrc for images?
问题描述
I would like to use lowsrc with the img tag to show a low resolution image first (and faster) while the larger resolution image loads.
我想使用带有 img 标签的 lowsrc 在加载较大分辨率的图像时首先（并且更快）显示低分辨率图像。
My large resolution images are @800KB and the low res versions @50KB.我的大分辨率图像是@800KB，低分辨率图像是@50KB。
Given that lowsrc has been deprecated and many browsers do not apparently support it I am looking for a solution that does the same thing, preferably with as little code as possible.鉴于 lowsrc 已被弃用并且许多浏览器显然不支持它，我正在寻找一种解决方案，它可以做同样的事情，最好使用尽可能少的代码。
Is there a good replacement for lowsrc? lowsrc 有很好的替代品吗？
3 个解决方案
解决方案1
19 已采纳 2014-11-28 15:02:02
<img src="lowres.jpg" onLoad="this.src='highres.jpg'" width="?" height="?">
这个替代版本显然可以防止 Firefox 中的无限请求循环（归功于@Ultimater 在评论中）：
<img src="lowres.jpg" onLoad="this.src='highres.jpg';this.onload=new Function();" width="?" height="?">
解决方案2
4 2015-12-08 18:53:43
The W3C Recommendation defining HTML5 has a list of obsolete, nonconforming features , including the lowsrc attribute.定义 HTML5 的 W3C 推荐标准有一个过时的、不符合标准的特性列表，包括lowsrc属性。 Its recommendation is to make a progressive JPEG image whose first scan has the same level of spatial detail as the 50 kB image and whose later scans fill in the extra details in the full 800 kB image.它的建议是制作一个渐进式 JPEG 图像，其第一次扫描具有与 50 kB 图像相同的空间细节级别，并且其后续扫描填充完整 800 kB 图像中的额外细节。 This mechanism presumably requires user agents to use HTTP range requests to determine how much data to retrieve relative to the size at which the image is displayed, just as they use range requests to seek through the source of an audio or video element.这种机制大概需要用户代理使用 HTTP 范围请求来确定相对于显示图像的大小要检索多少数据，就像他们使用范围请求来搜索audio或video元素的来源一样。
解决方案3
1 2015-03-18 15:12:34
I have two (three in the future) solutions:我有两个（未来三个）解决方案：
Pure CSS.
纯 CSS。 Will work if you only have a single placeholder image for all images being loaded.如果加载的所有图像只有一个占位符图像，则将起作用。 Just include a background for those images which have [lowsrc]property and specify some minimal height.只需为那些具有[lowsrc]属性的图像添加背景并指定一些最小高度。Use some JS to set the background.
使用一些JS来设置背景。 See http://codepen.io/anon/pen/yyQdYJ and set <body onload>correctly.请参阅http://codepen.io/anon/pen/yyQdYJ并正确设置<body onload>。Future.
未来。 Currently not working (2015).目前不工作（2015）。 Similar to #2, but using attr() CSS function one could set the background to the value of [lowsrc].与#2 类似，但使用attr() CSS 函数可以将背景设置为[lowsrc]的值。
All of these solutions work with a background, which doesn't allow to specify the correct height of the image according to the height of it's background.所有这些解决方案都使用背景，这不允许根据背景的高度指定图像的正确高度。
// Not working yet
img[lowsrc] {
width: 100%;
min-height: 10em;
background-image: attr(lowsrc);
}
They could have kept [lowsrc] working :-/他们本可以让[lowsrc]继续工作：-/
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.