Question

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

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

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

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

Answer 1

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

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

您可能更愿意attribute^=检查'以'开头而不是'包含'。

Answer 2

怎么样：

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

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

使用jQuery的属性以selector：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（公司徽标）
  /images/pr0n.jpg（安吉丽娜朱莉）

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

3 个答案: