0

我正在使用 Amazon S3，某些图像托管在那里。依次检查每个图像以验证其是否来自 CDN，有时会添加新图像而有人忘记上传它们，这有点痛苦，我认为有一个视觉提示会很好 - 可以从调试面板访问。

我想在页面上来自 CDN 的所有图像上画一个红色边框。

我怎么能用 jQuery 做到这一点。图像需要通过 URL 来识别（例如“images.example.com”）。

如果您有比简单的红色边框更聪明的解决方案，则可以加分。

4

3 回答 3

7

像使用选择器这样简单的事情怎么样attribute*=：

$(document).ready( function() {
  $('[img[src*=yourcdndomain]').addClass('from_cdn');
} );

您可能更喜欢attribute^=检查“开始于”而不是“包含”。

于 2009-03-11T03:29:35.433 回答
1

怎么样：

$("img[src^=http://images.example.com]").css("border", "solid 1px red");

或者您想要应用的任何其他样式/效果...

使用 jQuery 的属性以选择器开头：http: //docs.jquery.com/Selectors

于 2009-03-11T03:30:33.107 回答
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 回答