Compressing Image Source path in Javascript

Question

I have a web app which replaces few img's with other img's.

For example: Image with path http://example.com/example/example/images/dir/1.gif is repalced with http://cdn.example.com/dir/1.gif.

To do this I use jQuery attr().

So my code looks something like this:

$('img[src="http://www.example.com/dir/images/dir/1.gif"]').attr('src', "http://cdn.example.com/dir/1.gif");
$('img[src="http://www.example.com/dir/images/dir/2.gif"]').attr('src', "http://cdn.example.com/dir/2.gif");
$('img[src="http://www.example.com/dir/images/dir/3.gif"]').attr('src', "http://cdn.example.com/dir/3.gif");
$('img[src="http://www.example.com/dir/images/dir/4.gif"]').attr('src', "http://cdn.example.com/dir/4.gif");
$('img[src="http://www.example.com/dir/images/dir/5.gif"]').attr('src', "http://cdn.example.com/dir/5.gif");
$('img[src="http://www.example.com/dir/images/dir/6.gif"]').attr('src', "http://cdn.example.com/dir/6.gif");
$('img[src="http://www.example.com/dir/images/dir/7.gif"]').attr('src', "http://cdn.example.com/dir/7.gif");
$('img[src="http://www.example.com/dir/images/dir/8.gif"]').attr('src', "http://cdn.example.com/dir/8.gif");
$('img[src="http://www.example.com/dir/images/dir/9.gif"]').attr('src', "http://cdn.example.com/dir/9.gif");
$('img[src="http://www.example.com/dir/images/dir/10.gif"]').attr('src', "http://cdn.example.com/dir/10.gif")

So is there a way to compress this? So it's written in less characters?

Note: On each line, images on both websites are the same. Example, 1.gif is replaced again with 1.gif but a different server. So basically I want to replace the server. When http://www.example.com/dir/images/dir/ replace with http://cdn.example.com/dir/.

Thanks alot

If this is for performance reasons (bandwidth distribution), you should be doing this server-side. — Phil
– Phil, Commented Oct 24, 2011 at 3:50
+1 Phil, using a CDN to increase performance, but if you're doing this after page loads, i.e. the old images have already loaded and then you're doing the replaces, thats actually making performance worse — Moin Zaman
– Moin Zaman, Commented Oct 24, 2011 at 3:52
@Phil Images are retrieved from an API. So there is no way I can change that server-side unfortunately — jQuerybeast
– jQuerybeast, Commented Oct 24, 2011 at 4:05

zzzzBov · Accepted Answer · 2011-10-24 13:13:49Z

1

It's as simple as using a loop:

var i;
for ( i = 1; i <= 10; i++ )
{
  $('img[src="http://www.example.com/dir/images/dir/'+i+'.gif"]').attr('src','http://cdn.example.com/dir/'+i+'.gif');
}

Or were you asking for a find and replace for all?

You could use the attr starts with selector:

$('img[src^="http://www.example.com/"]').each(function(index,element){
  var $this, src, newSrc;
  $this = $(this);
  src = $this.attr('src');
  //do your replacement here
  newSrc = src.replace('www.example.com/dir/images/dir', 'cdn.example.com/dir');
  $this.attr('src', newSrc);
});

as Moin Zaman pointed out, attr can take a function as a parameter as well, which shortens this script to:

$('img[src^="http://www.example.com/"]').attr('src', function(index, src){
  return src.replace('www.example.com/dir/images/dir', 'cdn.example.com/dir');
});

edited Oct 24, 2011 at 13:13

answered Oct 24, 2011 at 3:11

zzzzBov

180k57 gold badges328 silver badges375 bronze badges

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

4 Comments

Moin Zaman Over a year ago

Using a loop for this is overkill. the attribute selector is better but you dont need .each

jQuerybeast Over a year ago

@zzzzBov Thank you. The images names are random. Could be anything so I the first option wouldn't work. As for the second option can you explain me the img[src^=" ? Why do I have to include ^ ?

Moin Zaman Over a year ago

@jQuerybeast look at my answer below for the explanation of ^= and a better way to do what you're wanting

jQuerybeast Over a year ago

@zzzzBov is it possible I can change the extension aswell sir? Thanks in advance. From gif to png

Moin Zaman · Accepted Answer · 2011-10-24 03:41:14Z

1

You need JavaScript's .replace() method with regular expressions to replace stuff.

in jQuery the attribute selector ^= means look for attribute value that starts with.

Try this, I'm assuming its all images that start with 'www.example.com':

$('img[src^="http://www.example.com/dir/images/dir"]').attr('src',
    function(i,src){ 
        return src.replace('example.com/dir/images/dir','cdn.example.com/dir') 
});

edited Oct 24, 2011 at 3:41

answered Oct 24, 2011 at 3:10

Moin Zaman

25.5k6 gold badges74 silver badges74 bronze badges

1 Comment

jQuerybeast Over a year ago

Down vote wasn't from me. Thanks for your answer. I will be checking it in a while.

Collectives™ on Stack Overflow

Compressing Image Source path in Javascript

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related