根據設備視網膜比例調整圖像路徑

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」