Поменять ссылки у img?

Question

[sierra]

Подскажите. На странице есть куча img с ссылками такого вида site.ru/?param1=1&param2=2 По ссылке просто генерируется картинка в зависимости от параметров и возвращается ссылка на уже реальное изображение.
Вобщем нужно поменять ссылки с параметрами на реальные ссылки.
На php, то есть на серверное стороне без проблем, но нужно на jquery, ну или на js.

Comments

[Владимир Коротенко]

https://jsfiddle.net/vkorotenko/s5hgmjLp/

[sierra]

Владимир Коротенко, спасибо. Но проблема не в том как поменять. Сам процесс запроса интересует.

Объясню поподробней. У меня как бы одностраничный сайт и все страницы грузятся через запросы ajax на сервер, там уже php формирует страницу и выдает обратно.
Самый простой вариант было бы конечно это прям на стороне сервера сразу получить все ссылки на изображения и уже отдать страницу как положено.
Но в этом случае будут задержки получения страницы.
Вот и хотелось бы уже всё это организовать на стороне клиента, если картинки(аватарки) не сразу появятся то ничего страшного, главное что контент уже загрузился.

[Владимир Коротенко]

А где тормоз? На клиенте или на сервере? Если на клиенте, то задайте фиксированный размер плейсхолдера и используйте одну из этих техник.

https://medium.com/@filipvitas/lazy-load-images-wi...

Answer 1

[sierra]

В jquery не очень, но появилась мысль извлечь все ссылки, отправить их через ajax ну и потом поменять всё на реальные ссылки. Попробую реализовать и проверить.

Comments

[sierra]

Не получилось как хотел, запросы через ajax не отправляются.

Access to XMLHttpRequest at 'site.ru/?param1=1&param2=2' from origin 'kms.ru' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: Redirect is not allowed for a preflight request.

Код вот такой

$('div.avatar', $(ls)).each(function () {
                        var l = $(this).find('img').attr('src');
                        replaceSrc(l, $(this))
                    });
...........
            function replaceSrc(uri, e) {
                var param = getSearchParams(uri);
                uri = uri.split('?')[0];
                $.ajax({
                    url: uri,
                    type: 'GET',
                    dataType: 'text',
                    data: param,
                    async: false,
                    error: function (jqXHR, exception) {
                        var a = '';
                    },
                    success: function (data) {
                        $(e).find('img').attr('src', data);
                    }
                });
            }

Если async ставлю в true то на CORS policy не ругается но все равно не работает, возвращает в error: status 0