How to dynamically change path in img?

Question

JavaScript

Подскажите пожалуйста как правильно сделать следующее.

Имеется слайдер, на определенных разрешениях изображения в нем разные.
Вижу пока три варианта решения.
1. Тупо прописать в разметке несколько изображений и скрывать/показывать в нужный момент через медиа запросы.
2. Динамически менять путь следующим образом.
Например изображения строго именуются в таком виде:
slide-1-320.png
slide-1-768.png
...
Через jQuery менять последние цифры, но я не знаю как обрезать расширение файла.
3. Добавить в img data атрибуты под каждое разрешение и прописать в них путь, далее просто вставлять его в src.

Нужен ваш совет, как правильно сделать?
Спасибо.

Answer 1

1. Плохое решение — не нужно загружать ненужные изображения.
2. Тоже не ахти. Генерацией путей, в общем случае, не следует управлять на фронтенде. И, опять же, будете грузить все изображения слайдера. Представляйте для таких ситуаций слайдер с сотней изображений.
3. Верное решение. Причём, если речь идёт о слайдере, то все пути записаны в data-атрибуты. Для появления нужного изображения берём путь из нужного data-атрибута. Таким образом будет грузиться только нужное изображение. Можно делать упреждающую загрузку (скажем, на 3 изображения в обе стороны).