使用jQuery检查视网膜图像，查看图像是否首先存在
使用jQuery检查视网膜图像，查看图像是否首先存在
提问于 2013-10-29 00:27:10
我从几个博客中找到了一些代码，我对自己进行了一些调整，以显示适合我当前情况的视网膜图像，以及如何在视网膜设备上显示更大的图像。当前代码只是将最后一个字母替换为字母“L”。
当前的脚本运行得很好，因为我所有的小图像都有"S.jpg“，所有的大图像都是"L.jpg”。
如何检查较大的版本是否存在，如果不存在，则恢复/保留较小的版本。目前，它试图显示大的，无论它是否存在。
我的HTML是这样的：(我不想给html添加任何额外的标签。即'-data-retina')
<img class="hires" alt="Image Name" src="/images/imageS.jpg" />这是我目前的jQuery：
if (window.devicePixelRatio == 2) {
var images = $("img.hires");
// loop through the images and make them hi-res
for (var i = 0; i < images.length; i++) {
// create new image name
var imageType = images[i].src.substr(-4);
var imageName = images[i].src.substr(0, images[i].src.length - 5);
imageName += "L" + imageType;
//rename image
images[i].src = imageName;
}我知道有一些预制的插件可以完成这项工作，但它们要么需要我将大图像添加到IMG标签的html源代码中，这对我来说并不理想。我只想让它与给定的类名一起工作。不是全部。
回答 2
Stack Overflow用户
发布于 2013-10-29 00:35:54
我会尝试使用AJAX请求，看看是否会得到404。因此，如下所示：
$.ajax({
url: // large image location,
error: function(jqHr, aError) {
if (aError == 'Not Found') {
// use smaller image
}
},
});我想你可以把它添加到一个函数中，然后在特定类的图像上调用该函数。
Stack Overflow用户
发布于 2013-10-30 23:43:04
好的，谢谢你的帮助。我已经设法用以下方法解决了这个问题。我相信这是可以改进的，因为我只是JS的初学者。只是为了以防万一有人觉得这很有用。
$("img.hires").error(function () {
var src = $(this).attr('src');
$(this).attr('src', src.replace("L", "S"));
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/19640094
复制相关文章
相似问题
腾讯云开发者
