jquery - 根据设备视网膜比率调整图像路径

Question

我正在为摄影师创建一个网站，目前我正在创建一个画廊。为了节省大量代码，我自动化了很多代码，包括文件名、路径、宽度、灯箱类等。

在 HTML 中我只需要写一个 <a>带有标题，剩下的由 jQuery 处理。

HTML

<a alt="All-my-Loving"></a>

jQuery

$(function () {
    $('.imagesContainer a').each(function () {
        var $link = $(this),
            title = $link.attr('alt'),
            thumb = 'images/portfolio/thumbs/' + title + '.jpg';

    $link.attr('data-target', 'flare');          // for gallery plugin
    $link.attr('data-flare-scale', 'fitmax');    // for gallery plugin
    $link.attr('data-flare-thumb', thumb);       // for gallery plugin
    $link.attr('data-flare-gallery', 'main');    // for gallery plugin
    $link.addClass('item');                      // for IsoTope/Packery/Masonry
    $link.attr('href', 'images/portfolio/full/' + title + '.jpg'); // Link to full image

    $link.append($('<img>', {
      src     : 'images/portfolio/thumbs/' + title + '.jpg'    // Link to thumbnail image in gallery
    }));
    });
});

问题:
但是，图像路径指向常规 (@1x) 图像，并且由于我想让该站点具有视网膜防护功能，因此当设备具有视网膜屏幕时，路径应指向 @2x 或 @3x 图像。

据我所知，虽然还没有完全尝试过，Retina.js不是一个选项，因为这仅适用于内联图像，但在执行上述脚本后，所有图像都会获得其 src 图像路径。

一个必须:
对于视网膜设备，如何实现视网膜图像而不是常规图像并不重要，只要没有将单个图像下载两次(1x 和 2x，同时)。

谁有线索？

---

可能的(理论上)解决方案:
除了上面的JS脚本，简单的有一个IF语句

If (window.devicePixelRatio > 1) {
    $link.append($('<img>', {
      src     : 'images/portfolio/thumbsRETINA/' + title + '.jpg'
    }));
} else {
    $link.append($('<img>', {
      src     : 'images/portfolio/thumbsREGULAR/' + title + '.jpg'
    }));
}

然后应用该 IF 语句来检查每个 ImagePath 请求的设备是否为 Retina。

---

更新
我已经应用了上面的 IF 语句并且它正在工作。 RetinaFolders 是空的，我的 iPhone 6 没有显示图像(因为没有图像)。我只是不确定这是否是正确的方法。新脚本变为:

$(function () {
    $('.imagesContainer a').each(function () {
        var $link = $(this),
            title = $link.attr('alt'),
            thumb = 'images/portfolio/thumbs/' + title + '.jpg';
            retinaThumb = 'images/portfolio/thumbs-retina/' + title + '.jpg';

    // regular tags
    $link.attr('data-target', 'flare');
    $link.attr('data-flare-scale', 'fitmax');
    $link.attr('data-flare-gallery', 'main');
    $link.addClass('item');
    $link.attr('href', 'images/portfolio/full/' + title + '.jpg');

    // Retina tags
    if (window.devicePixelRatio > 1) {                  // If the device has retina graphics
        $link.attr('data-flare-thumb', retinaThumb);
        $link.attr('href', 'images/portfolio/full-retina/' + title + '.jpg');
        $link.append($('<img>', {
          src     : 'images/portfolio/thumbs-retina/' + title + '.jpg'
        }));
    } else {                                            // If the device does not has retina graphics
        $link.attr('data-flare-thumb', thumb);
        $link.attr('href', 'images/portfolio/full/' + title + '.jpg');
        $link.append($('<img>', {
          src     : 'images/portfolio/thumbs/' + title + '.jpg'
        }));
    }

    });
});

Answer 1

这是一个理论上的答案。您必须根据自己的需要对其进行调整。

添加 data-retina-src每个图像的属性(在 jQuery 中有效):

<img src="image.jpg" data-retina-src="image2X.jpg" alt="">

使用 jQuery 媒体查询并使用 data-retina-src 切换图像源来源。

编辑 1:

检查这些链接以获取 jQuery 视网膜检测:

http://egorkhmelev.github.io/retina/

What is the best way to detect retina support on a device using JavaScript?

编辑 2:

使用此脚本 - http://imulus.github.io/retinajs/ - 并自动检查替代图像:

For example, if you have an image on your page that looks like this: <img src="/images/my_image.png" />

The script will check your server to see if an alternative image exists at this path: "/images/my_image@2x.png"