Question

我发现了一些来自几个博客的代码，我已经调整了一些，以显示适合我目前情况的视网膜图像，以及如何为视网膜设备显示更大的图像。当前代码只是用字母'L'替换最后一个字母。

当前脚本完美无缺，因为我的所有小图片都有“S.jpg”，而我所有的大图像都是“L.jpg”。

如何检查是否存在较大的存在，如果不存在，则恢复/保留小版本。目前它无论是否存在都会尝试显示大的数据。

我的html是这样的:(我不想在HTML中添加任何额外的标签.I.e'-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源代码，这对我来说并不理想。我只想让它与给定的类名一起工作。不是全部。

Answer 1

我会尝试使用AJAX请求，看看你是否得到404.所以，如下所示：

  $.ajax({
     url: // large image location,
     error: function(jqHr, aError) {
       if (aError == 'Not Found') {
         // use smaller image
       }
     },
   });

我认为您可以将其添加到函数中，然后在特定类的图像上调用该函数。

Answer 2

好的，谢谢你的帮助。我已成功解决了以下问题。我确信它可以改进，因为我只是JS的初学者。只是有人认为这有用。

        $("img.hires").error(function () {
            var src = $(this).attr('src');
            $(this).attr('src', src.replace("L", "S"));
        });

使用jQuery的Retina图像 - 检查图像是否存在

2 个答案: