我想使用lowsrc与img标签显示低分辨率的图像第一（和更快），而较大的分辨率图像加载。我的大分辨率图像是@800KB和低分辨率版本@50KB。鉴于lowsrc已经被弃用，许多浏览器显然不支持它，我正在寻找一个解决方案，做同样的事情，最好是尽可能少的代码。lowsrc有好的替代品吗？
zyfwsgd61#
感谢@Ultimater在评论中提出的建议，以防止无限的请求循环。
<img src="lowres.jpg" onLoad="this.src='highres.jpg';this.onload=new Function();" width="?" height="?">
字符串
tjrkku2a2#
定义HTML5的W3C推荐标准列出了一系列过时的、过时的特性，包括lowsrc属性。它的建议是制作一个渐进式JPEG图像，其第一次扫描具有与50 kB图像相同的空间细节级别，其后续扫描填充完整800 kB图像中的额外细节。这种机制可能需要用户代理使用HTTP范围请求来确定如何相对于图像显示的大小，要检索的数据量很大，就像它们使用范围请求来搜索audio或video元素的源一样。
lowsrc
audio
video
swvgeqrz3#
我有两个（未来三个）解决方案：1.纯CSS。如果您只有一个占位符图像用于加载所有图像，则可以工作。只需为具有[lowsrc]属性的图像添加背景并指定一些最小高度。1.使用一些JS设置背景。参见http://codepen.io/anon/pen/yyQdYJ并正确设置<body onload>。
[lowsrc]
<body onload>
// Not working yet img[lowsrc] { width: 100%; min-height: 10em; background-image: attr(lowsrc); }
字符串他们本可以让[lowsrc]继续工作：-/
3条答案
按热度按时间zyfwsgd61#
感谢@Ultimater在评论中提出的建议，以防止无限的请求循环。
字符串
tjrkku2a2#
定义HTML5的W3C推荐标准列出了一系列过时的、过时的特性，包括
lowsrc属性。它的建议是制作一个渐进式JPEG图像，其第一次扫描具有与50 kB图像相同的空间细节级别，其后续扫描填充完整800 kB图像中的额外细节。这种机制可能需要用户代理使用HTTP范围请求来确定如何相对于图像显示的大小，要检索的数据量很大，就像它们使用范围请求来搜索audio或video元素的源一样。swvgeqrz3#
我有两个（未来三个）解决方案：
1.纯CSS。如果您只有一个占位符图像用于加载所有图像，则可以工作。只需为具有
[lowsrc]属性的图像添加背景并指定一些最小高度。1.使用一些JS设置背景。参见http://codepen.io/anon/pen/yyQdYJ并正确设置
<body onload>。[lowsrc]。所有这些解决方案都使用背景，这不允许根据背景的高度指定图像的正确高度。
字符串
他们本可以让
[lowsrc]继续工作：-/