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/ - 并自动检查备用图片：

例如，如果您的网页上有一个如下图像：   <img src="/images/my_image.png" />

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

基于设备视网膜比调整图像路径

1 个答案: