JavaScript - Detect if an image is present by using its src tag

Question

I've been trying to learn this myself several hours and just had to give up and plead for mercy.

I'm writing a greasemonkey script that interacts with my work OWA (Outlook Web Access), nothing fancy at all.

The goal is to find and count the number of times an image (which has no name or id) exists within my 'inbox'.

Here's my simple test that fails and I sure wish I knew why:

var ilist = document.images;
for(var i = 0; i < ilist.length; i++) {
    if(ilist[i] == "msg-unrd.gif") {
        // found the image
        alert('Found new message image!');
    }
}

The intent is to take the count of those 'new message' images and place them into a variable that will be used within the page title.

parent.document.title = "(..+UNREAD_COUNT+..) Inbox";

The source of the 'inbox' and the message I'm trying to detect and count looks like so:

img alt="Message: Unread" src="8.1.393.1/themes/base/msg-unrd.gif"

I know there are a few other greasemonkey scripts written for OWA, but the source has changed since the ones I've tried to use so they fail too.

Hope your holidays have been great!

watain · Accepted Answer · 2009-12-30 18:39:42Z

4

I'd do it like that (you forgot the src attribute):

var images = document.getElementsByTagName('img');
var count = 0;
for (var i = 0; i < images.length; i++)
    if (images[i].src.match(/msg-unrd\.gif$/))
        count++;

... or if you use Prototype JS:

var count = $$('img[src~=msg-unrd\.gif]').length; // Win!

edited Dec 30, 2009 at 18:39

answered Dec 30, 2009 at 18:23

watain

5,1784 gold badges36 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Christian C. Salvadó Over a year ago

I would recommend you to use RegExp.test instead of String.match, since you only want to know if the string is matched or not... /msg-unrd\.gif$/.test(images[i].src)

Aaron M. Over a year ago

Wow, I can't believe I wasted six hours of my life trying to work this out. Looking at the solution, I was at least another sixty from figuring it out. Thank you so very much.

watain Over a year ago

@CMS: right, using test would better actually. @Aaron: no problem ;)

BalusC · Accepted Answer · 2009-12-30 18:35:50Z

1

You need to compare the URL with the src attribute of the image element, not with the whole image element itself:

String src = "msg-unrd.gif";
if (ilist[i].src.match(src + '$') == src) {
    // ...
}

Edit it should actually end with the specified URL, I overlooked that. I've improved the code example.

edited Dec 30, 2009 at 18:35

answered Dec 30, 2009 at 18:21

BalusC

1.1m377 gold badges3.7k silver badges3.6k bronze badges

Comments

kennebec · Accepted Answer · 2009-12-30 18:32:15Z

0

document.images is still handy:

var count=0, images=document.images;
for(var i=0, L=images.length;i<L;i++){
      if(images[i].src.indexOf('msg-unrd.gif')!=-1)count+=1;
}

answered Dec 30, 2009 at 18:32

kennebec

105k32 gold badges109 silver badges127 bronze badges

Comments

Lathan · Accepted Answer · 2009-12-30 20:50:58Z

0

If you want to use jquery, you can do it in one line (although it is still doing the same work in the backend)

$('img[src$=msg-unrd.gif]').size()

answered Dec 30, 2009 at 20:50

Lathan

8534 silver badges14 bronze badges

Collectives™ on Stack Overflow

JavaScript - Detect if an image is present by using its src tag

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related