Javascript 如何获得具有数据属性的视网膜就绪图像？

所以我有一个下面的脚本，当用户滚动时，logo文件

“logo sticky.png”

就会出现，而不是文件

“logo.png”

。 我绞尽脑汁想找到一个解决方案，如何为我的图像准备好视网膜文件

非常感谢您的帮助

$（窗口）。滚动（函数（）{
如果导航栏变为非不透明时（$（this）.scrollTop（）>50）/*高度（以像素为单位）*/
{
$（'.sticky-navbar'）.addClass（'sticky'）；
}否则{
$（'sticky navbar'）。removeClass（'sticky'）；
}
});
var navbarImg=$（'.navbar品牌>img'）
navbramg.data（'original'，navbramg.attr（'src'））
$（窗口）。滚动（函数（）{
var stickyNav=$（'.stickynavbar'）；
var isSticky=$（this）.scrollTop（）>50；
stickyNav.toggleClass（“sticky”，isSticky）；
navbarImg.attr（'src'，navbarImg.data（isSticky？'sticky'：'original'）；
});
您可以在HTML中使用该属性，而不是使用JS

在这种情况下，有不同的方法来解决这个问题


针对不同的屏幕大小使用不同的图像，包括：

在这种情况下，它将只是经典的响应风格

<img src="logo-400.png" 
  srcset="logo-200.jpg 200w, 
          logo-400.jpg 400w,
          logo-800.jpg 800w,
          logo-1200.jpg 1200w"
  data-sticky="assets/images/logo-sticky.png" 
/>




使用高质量的图像

在这里，我们也给浏览器一个默认图像，然后他会根据屏幕大小自动定义要拍摄的图像

<img src="logo-1x.jpg" 
  srcset="logo-2x.jpg 2x, 
          logo-3x.jpg 3x"
  data-sticky="assets/images/logo-sticky.png" 
/>


根据需要支持的浏览器，您可以使用
srcset
。这样你就不需要任何JS逻辑了。非常感谢。Android浏览器目前不支持srcset，这是对的吗？不，所有主要的Android浏览器也支持srcset:。只有IE、黑莓和Opera才是你想要的issues@RoryMcCrossan这很好，但不幸的是，我担心这对我的数据粘性属性不起作用：（它不会干扰它）