我正在为摄影师创建一个网站,目前我正在创建一个画廊。为了节省大量代码,我自动化了很多代码,包括文件名、路径、宽度、灯箱类等。
在 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'
}));
}
});
});
最佳答案
这是一个理论上的答案。您必须根据自己的需要对其进行调整。
添加 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/ - 并自动检查替代图像:
For example, if you have an image on your page that looks like this:
<img src="/images/my_image.png" />
The script will check your server to see if an alternative image exists at this path: "
/images/my_image@2x.png
"
关于jquery - 根据设备视网膜比率调整图像路径,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29801817/