2

我一直在努力寻找解决视网膜时代一个非常普遍的问题的好方法。

假设给出了以下内容：

  • 使用响应式图像创建网站
  • 没有 CSS 背景图片
  • 网站基本功能必须在没有 JS 的情况下工作
  • 网站图像必须针对视网膜显示进行优化。

解决这个问题的一个简单方法可能是这样的： 

<img src="img.jpg" data-highres="img@2x.jpg" />

如果检测到视网膜设备，则编写某种 js 将 img.jpg 替换为 img@2x.jpg。这会起作用，但如果我在视网膜设备上输入网站，img.jpg 和 img@2x.jpg 都会被加载。对带宽不太友好:(

是否有可能在加载原始 src 之前以某种方式拦截和更改图像的 src？

或者你们中的任何人有其他解决问题的方法吗？

4

4 回答 4

1

将来，您也许可以使用图片元素。与此同时，我见过的唯一可行的方法是：

  1. 将 div 或 span 放在您想要图像的位置。将其设置为具有图像的尺寸和布局。添加某种识别标记，以便您可以找到它（例如class="retina-image"）
  2. 存储有关您在元素上或元素中的不同尺寸图像的信息（例如使用data-something属性）
  3. <noscript><img src="..." alt="..."></script>在 div 里面放一个
  4. 在 DOM 准备就绪时：
    1. 使用 JS 查找具有步骤 1 中标识符的所有元素
    2. 检测您想要的图像类型
    3. 找到告诉您该图像使用哪个 URL 的属性
    4. 从步骤 1 将图像添加到容器内的 DOM

这是图片填充库使用的方法。

于 2014-02-25T09:22:55.180 回答
0

这可能是诱饵，但这是我的两分钱：

对带宽的关注主要是移动平台问题。考虑到现在大多数现代移动平台都采用高像素密度显示器，这些设备对高分辨率图像的需求将会非常高。当您可以在 100% 的时间提供 2 倍的分辨率时，为什么要在 90% 的时间内提供 3 倍的图像分辨率（低分辨率和高分辨率图像）？

因此，在某些情况下，只提供更高分辨率的图像（将它们的宽度/高度样式减半）并保留它可能会更容易——从而在其他地方节省（昂贵的）时间和精力。在一个一切似乎都是妥协的行业中，这有时是最有意义的一种方法。

于 2014-02-25T13:04:55.833 回答
0

我认为昆汀基本上回答了你的问题。

我可以补充的是，虽然没有 src 的 img 元素在技术上不符合规范，但省略它不会破坏您的代码，并且您将避免预加载。然后，您可以<img data-src="" data-src2="">使用 JavaScript 将图像输入/输出。该<noscript>元素可能是执行此操作的“正确”方式，但它使代码非常冗长，而且我听说一些浏览器也会预加载<noscript>图像。

我遇到的一项使图像具有响应性（包括 Retina 显示器）的服务是Pixtulate。它们还提供 JavaScript 以在页面完成加载之前正确调整大小并替换您的 img.src url。进去应该很简单。

于 2014-02-28T21:06:36.753 回答
-1

如果您对具有属性的window.devicePixelRatio图像执行某些操作并循环播放。data-highres

这很粗糙，但你明白我的意思。

 $(document).ready(function() {
     if (window.devicePixelRatio > 1) {
         // retina
     } else {
         // default
     }
 });

使用空白/清晰的 1px gif

<img src="clear.gif" data-basesrc="img1" />

然后使用basesrc属性并在您的 JS 中附加适当的文件名。

于 2014-02-25T08:51:39.777 回答