Question

我想使用带有img标签的lowsrc在加载较大分辨率的图像时首先（和更快）显示低分辨率图像。

我的大分辨率图像为@ 800KB，低分辨率版本为@ 50KB。

鉴于lowsrc已被弃用，并且许多浏览器显然不支持它，我正在寻找一个能做同样事情的解决方案，最好用尽可能少的代码。

lowsrc是否有一个很好的替代品？

Answer 1

<img src="lowres.jpg" onLoad="this.src='highres.jpg'" width="?" height="?">

Answer 2

定义HTML5的W3C建议书有一个obsolete, nonconforming features列表，包括lowsrc属性。它的建议是制作一个渐进式JPEG图像，其第一次扫描具有与50 kB图像相同的空间细节水平，并且其后续扫描在完整的800 kB图像中填充额外的细节。此机制可能需要用户代理使用HTTP范围请求来确定相对于显示图像的大小要检索的数据量，就像它们使用范围请求来搜索audio或{{的来源一样1}}元素。

Answer 3

我有两个（未来三个）解决方案：

纯CSS。如果您只为所有正在加载的图像添加一个占位符图像，则可以正常工作。只需为那些具有[lowsrc]属性并指定一些最小高度的图像添加背景。
使用一些JS来设置背景。请参阅http://codepen.io/anon/pen/yyQdYJ并正确设置<body onload>。
未来。目前无法正常工作（2015年）。与＃2类似，但使用attr() CSS function可以将背景设置为[lowsrc]的值。

所有这些解决方案都使用背景，不允许根据背景的高度指定图像的正确高度。

// Not working yet
img[lowsrc] {
  width: 100%;
  min-height: 10em;
  background-image: attr(lowsrc);
}

他们可以保持[lowsrc]工作： - /

对于图像，已弃用的lowsrc的最佳替代方法是什么？

3 个答案: