Сжатие пути к источнику изображения в Javascript

ProgramBox

Сжатие пути к источнику изображения в Javascript

Post author:admin
Запись опубликована:31 августа, 2022
Post category:Вопросы по программированию

#jquery #image #replace #attr #imagesource

#jquery #изображение #заменить #аттр #источник изображений

Вопрос:

У меня есть веб-приложение, которое заменяет несколько изображений на другие изображения.

Например: изображение с путем http://example.com/example/example/images/dir/1.gif пересчитывается с http://cdn.example.com/dir/1.gif .

Для этого я использую jQuery attr() .

Итак, мой код выглядит примерно так:

 $('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")

Итак, есть ли способ сжать это? Значит, он написан меньшим количеством символов?

Примечание: в каждой строке изображения на обоих веб-сайтах одинаковы. Пример, 1.gif снова заменяется на 1.gif но на другом сервере. Итак, в основном я хочу заменить сервер. Когда http://www.example.com/dir/images/dir / заменить на http://cdn.example.com/dir /.

Большое спасибо

1. Если это делается по соображениям производительности (распределение полосы пропускания), вы должны делать это на стороне сервера.

2. 1 Фил, использование CDN для повышения производительности, но если вы делаете это после загрузки страницы, т.Е. Старые изображения уже загружены, а затем вы выполняете замену, это фактически ухудшает производительность

3. @Phil Изображения извлекаются из API. Так что, к сожалению, я никак не могу изменить это на стороне сервера

Ответ №1:

Это так же просто, как использовать цикл:

 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');
}

Или вы просили найти и заменить для всех?

Вы могли бы использовать attr начинается с селектора:

 $('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);
});

как указал Моин Заман, attr также может принимать функцию в качестве параметра, что сокращает этот скрипт до:

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

1. Использование цикла для этого является излишним. селектор атрибутов лучше, но вам не нужен. каждый

2. @zzzzBov Спасибо. Имена изображений являются случайными. Может быть что угодно, поэтому первый вариант не будет работать. Что касается второго варианта, можете ли вы объяснить мне img[src ^=» ? Почему я должен включать ^ ?

3. @jQuerybeast посмотрите на мой ответ ниже для объяснения ^= и лучшего способа сделать то, что вы хотите

4. @zzzzBov возможно ли, что я также могу изменить расширение, сэр? Заранее спасибо. Из gif в png

Ответ №2:

Для замены материала вам нужен метод JavaScript .replace() с регулярными выражениями.

в jQuery селектор атрибута ^= означает поиск значения атрибута, начинающегося с.

Попробуйте это, я предполагаю, что это все изображения, которые начинаются с ‘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') 
});