根据设备视网膜比例调整图像路径

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图像路径。

一个单一绝：
不要紧，如何实现视网膜图像，而不是普通的人视网膜设备，只要不是单个图像被下载两次（倍和2倍，同时）。

谁有线索？

---

可能（理论上）解决方案：
除了上述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请求。

---

更新
我申请上述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/ - 并为您自动切换图像：

举例来说，如果你有你的页面上，看起来像这样的图像： <img src="/images/my_image.png" />

该脚本将检查你的服务器，以查看是否有替代图像 存在于此路径：“/images/my_image@2x.png”