0

我正在尝试在新窗口中打开图像并根据 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

4

2 回答 2

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');
    });
于 2016-02-26T09:01:06.600 回答
0

当您执行这两个步骤时：

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

您将始终https://farm4.staticflickr.com/3059/2835191823_e3636abb34_m.jpg基于data-srcset. 这是因为在第一步中，您通过用空格分割字符串来创建数组，而在第二步中，您访问数组中的第一个元素。所以$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');

当然，现在您还必须定义一些规则来查看在哪种情况下您将加载哪个图像。例如，要确定屏幕分辨率，您可以使用类似https://stackoverflow.com/a/2242100/3353542的内容，然后检查这些值以提供正确的图像。

于 2016-02-25T15:10:25.470 回答