使用jQuery对CDN上托管的所有镜像应用红色边框

Question

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

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

我怎么能用jQuery做到这一点呢？图像需要通过URL标识(例如，'images.example.com')。

额外的分数，如果你有一个比简单的红色边框更聪明的解决方案。

Answer 1

使用attribute*=选择器之类的简单方法如何：

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

您可能更喜欢attribute^=检查“starts”而不是“contains”。

Answer 2

这样如何：

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

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

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

Answer 3

$('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 (公司徽标)

/图像/pr0n.jpg(安吉丽娜·朱莉)