我在网站上有一个图片,我想更改特定尺寸的文件名/来源。我有点工作,但它的错误 - 见下面的代码。
如果原始文件名是example.jpg,则效果很好 - 但是如果原始文件名是example@2x.jpg则会失败 - 我在网站上使用了retinaJS - 所以当一个宽大的移动设备加载页面时,它会呈现example.jpg文件为example@2x.jpg - 但是当切换到肖像时 - 问题就出现了,因为我的代码没有重命名example@2x.jpg成为example_mobile@2x.jpg ......
我想我需要在第一部分中使用第二个语句来重命名以@ 2x.jpg结尾的文件成为example_mobile@2x.jpg - 目前它们正被重命名为示例@ 2x_mobile @ 2x.jpg这是错误的..
有什么想法吗?我很难过!
function endsWith(str, suffix) {
return str.indexOf(suffix, str.length - suffix.length) !== -1;
}
var clientsLIControl = function() {
var windowSizeClients = $(window).width();
//if (windowSizeClients <= 480) {
if (windowSizeClients <= 568) {
$("div.nivoSlider img").each(function() {
if (!endsWith($(this).attr('src'), '_mobile@2x.jpg')) {
$(this).attr('src', $(this).attr('src').replace(/\.jpg/, '') + '_mobile@2x.jpg');
}
//call div resizer
resizeDiv();
});
$("div.heroElementWrapper img").each(function() {
if (!endsWith($(this).attr('src'), '_mobile@2x.jpg')) {
$(this).attr('src', $(this).attr('src').replace(/\.jpg/, '') + '_mobile@2x.jpg');
}
//call div resizer
resizeDiv();
});
}
//else if (windowSizeClients >= 481) {
else if (windowSizeClients >= 569) {
$("div.nivoSlider img").each(function() {
if (endsWith($(this).attr('src'), '_mobile@2x.jpg')) {
$(this).attr('src', $(this).attr('src').replace(/\_mobile@2x.jpg/, '') + '.jpg');
}
//call div resizer
resizeDiv();
});
$("div.heroElementWrapper img").each(function() {
if (endsWith($(this).attr('src'), '_mobile@2x.jpg')) {
$(this).attr('src', $(this).attr('src').replace(/\_mobile@2x.jpg/, '') + '.jpg');
}
//call div resizer
resizeDiv();
});
}
};
clientsLIControl();
$(window).resize(function() { clientsLIControl(); });
$(window).load(function() { clientsLIControl(); });
$(document).ready(function() { clientsLIControl(); });
HTML
<img id="HeroElementBGImage" title="example" alt="example" src="assets/images/heros/example.jpg">
然后,如果在视网膜设备上提供,则更改为
<img id="HeroElementBGImage" title="example" alt="example" src="assets/images/heros/example@2x.jpg">