0

私は Amazon S3 を使用しており、特定の画像がそこでホストされています。各画像を順番にチェックして CDN からのものであることを確認するのは面倒で、新しい画像が追加されて誰かがアップロードするのを忘れてしまうこともあります。デバッグ パネルからアクセスできる視覚的な合図があればいいと思いました。

CDN から取得したページ上のすべての画像に赤い境界線を描画したいと思います。

jQueryでこれを行うにはどうすればよいですか。画像は URL で識別する必要があります (例: 「images.example.com」)。

単純な赤い境界線よりも賢い解決策がある場合は、追加のポイント。

4

3 に答える 3

0 
$('button#checkForCDNImages').click(function() {
    var message = '',
        cdnURL = 'http://cdn.mysite.com',
        $imgs = $('img[src^=' + cdnURL + ']')
    ;
    if ($imgs.length) {
        $imgs
            .addClass('cdn-image') // apply your own styles for this
            .each(function() {
                message += "\n" + this.src.substring(cdnURL.length) + " (" + this.alt + ")";
            })
            .get(0)           // grab the first one
            .scrollIntoView() // and scroll to it
        ;
        alert ("The following images are on the CDN:" + message);
    } else {
        alert ("No images found originating from the CDN.");
    }
});

ボタンをクリックすると、次のような出力が得られます。

次の画像は CDN にあります:
/images/image1.jpg (会社のロゴ)
/images/pr0n.jpg (アンジェリーナ・ジョリー)

于 2009-03-11T05:23:08.030 に答える