Apply a red border to all images hosted on CDN with jQuery

Question

I am using Amazon S3 and certain images are hosted there. Its kind of a pain to check each image in turn to verify its coming from the CDN and sometimes new images are added and someone forgets to upload them, and I thought it would be nice to have a visual cue - accessible from a debug panel.

I'd like to draw a red border on all images on my page that are coming from the CDN.

How could I do this with jQuery. The images would need to be identified by a URL (eg. 'images.example.com').

Extra points if you have a cleverer solution than a simple red border.

Answer 1

How about something simple like using the attribute*= selector:

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

You might prefer attribute^= to check for 'starts with' instead of 'contains'.

Answer 2

How about:

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

Or whatever other style/effect you want to apply...

Uses jQuery's attribute starts with 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.");
    }
});

Clicking on your button will give an output like this:

The following images are on the CDN:
/images/image1.jpg (Company logo)
/images/pr0n.jpg (Angelina Jolie)