0

我从几个博客中找到了一些代码，我已经对自己进行了一些调整，以显示适合我目前情况的视网膜图像，以及如何为视网膜设备显示更大的图像。当前代码只是将最后一个字母替换为字母“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 源中，这对我来说并不理想。我只希望它与给定的类名一起工作。不是全部。

4

2 回答 2

0

好的，谢谢你的帮助。我已经设法通过以下方法解决了这个问题。我确信它可以改进，因为我只是 JS 的初学者。以防万一有人觉得这很有用。

        $("img.hires").error(function () {
            var src = $(this).attr('src');
            $(this).attr('src', src.replace("L", "S"));
        });
于 2013-10-30T15:43:04.377 回答
0

我会尝试使用 AJAX 请求并查看是否收到 404。因此，类似于以下内容：

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

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

于 2013-10-28T16:35:54.443 回答