如何在新 window 中从 srcset 打开正确的 img？

Question

我正在尝试在新 window 中打开图像并根据 srcset 加载正确的图像，以便根据分辨率打开正确的图像尺寸

html:

<div class="gallery-cell">
   <img alt="100%x200" data-srcset="https://farm4.staticflickr.com/3059/2835191823_e3636abb34_m.jpg 240w, https://farm4.staticflickr.com/3059/2835191823_e3636abb34_n.jpg 320w, https://farm4.staticflickr.com/3059/2835191823_e3636abb34.jpg 500w, https://farm4.staticflickr.com/3059/2835191823_e3636abb34_z.jpg 640w, https://farm4.staticflickr.com/3059/2835191823_e3636abb34_b.jpg 1920w" data-sizes="100%" sizes="100%" srcset="https://farm4.staticflickr.com/3059/2835191823_e3636abb34_m.jpg 240w, https://farm4.staticflickr.com/3059/2835191823_e3636abb34_n.jpg 320w, https://farm4.staticflickr.com/3059/2835191823_e3636abb34.jpg 500w, https://farm4.staticflickr.com/3059/2835191823_e3636abb34_z.jpg 640w, https://farm4.staticflickr.com/3059/2835191823_e3636abb34_b.jpg 1920w">
</div>

jQuery

$(".gallery-cell").on("click", function(e){
   e.preventDefault();
   var img_to_load = $(this).find('img').attr('data-srcset');
   var $str = img_to_load.split(' ');
   var $retina = $str[0];
   imgWindow = window.open(img_to_load, 'imgWindow');
});

上面没有根据分辨率打开不同的图像，但是这个https://farm4.staticflickr.com/3059/2835191823_e3636abb34_m.jpg

我相信是因为 $str[0]; 但我已尝试不插入索引 [0]，这将我带到 未找到的图像

示例：http://codepen.io/aFarkas/pen/OVoavw

Answer 1

当您执行这两个步骤时：

var $str = img_to_load.split(' ');
var $retina = $str[0];

根据 data-srcset 中的字符串，您将始终以 https://farm4.staticflickr.com/3059/2835191823_e3636abb34_m.jpg 结束。这是因为在第一步中，您通过按空格拆分字符串来创建数组，而在第二步中，您访问了数组中的第一个元素。所以$str[0]是https://farm4.staticflickr.com/3059/2835191823_e3636abb34_m.jpg，$str[1]是240w,等等。

要获得此字符串的所需部分，您必须执行一些复杂的字符串操作，因此我建议您使用不同的方法。而不是

data-srcset="https://farm4.staticflickr.com/3059/2835191823_e3636abb34_m.jpg 240w, https://farm4.staticflickr.com/3059/2835191823_e3636abb34_n.jpg 320w, https://farm4.staticflickr.com/3059/2835191823_e3636abb34.jpg 500w, https://farm4.staticflickr.com/3059/2835191823_e3636abb34_z.jpg 640w, https://farm4.staticflickr.com/3059/2835191823_e3636abb34_b.jpg 1920w"

为什么不把它分成这样的独立部分：

data-srcset-240w="https://farm4.staticflickr.com/3059/2835191823_e3636abb34_m.jpg"
data-srcset-320w="https://farm4.staticflickr.com/3059/2835191823_e3636abb34_n.jpg"

等等。完成后，您可以像这样访问所需的部分，例如，如果您需要 240w 图像：

var img_to_load = $(this).find('img').attr('data-srcset-240w');

当然，现在您还必须定义一些规则，以查看在哪种情况下您将加载哪个图像。例如，要确定屏幕分辨率，您可以使用类似的方法，然后检查这些值以提供正确的图像。

Answer 2

解决方案是使用.currentSrc

    $(".gallery-cell").on("click", function(e){
       e.preventDefault();
       var src = $(this).find('img').get(0).currentSrc; // get DOM element's currentSrc
       imgWindow = window.open(src, 'imgWindow');
    });

如何在新 window 中从 srcset 打开正确的 img？

How to open a correct img from srcset in a new window?

html

javascript

jquery

srcset

flickity