0

いくつかのブログから、Retina デバイス用に大きな画像を表示する方法で現在の状況に合った Retina 画像を表示するように自分自身を少し調整したコードを見つけました。現在のコードは、最後の文字を文字「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 に答える