Как динамически менять путь в img?

Question

[massef]

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

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

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

Answer 1

[Евгений Петров]

1. Плохое решение — не нужно загружать ненужные изображения.

2. Тоже не ахти. Генерацией путей, в общем случае, не следует управлять на фронтенде. И, опять же, будете грузить все изображения слайдера. Представляйте для таких ситуаций слайдер с сотней изображений.

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

Comments

[massef]

Спасибо за ответ. Я обновил вопрос, что-то 3й вариант не срабатывает. Хотя я так понимаю, что это только при ресайзе. Под нужным разрешением по идее должно работать, так как страница будет сразу в нем загружаться, но сработает если скрипт успеет отработать. Или я ошибаюсь?

Насчет предзагрузки думал и даже нашел вариант решения

function preload(arrayOfImages) {
    $(arrayOfImages).each(function(){
        $('<img/>')[0].src = this;
    });
}
 
preload([
    'img/small.jpg',
    'img/medium.jpg'
]);

Но сейчас вспомнил, в требованиях было сказано, оставить возможность менять изображения в слайдере. Я так понимаю тут уже без вариантов? (

[Евгений Петров]

massef: Давайте представим логику.
1. При загрузке мы пишем в слайдер параметр, указывающий на то, какой адрес выбрать. При ресайзе окна мы согласно правилам меняем этот параметр.

2. У слайдера есть всегда другой параметр, отвечающий за номер текущего изображения. При ресайзе окна мы согласно правилам (первый параметр) меняем его источник. Только у него.

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

4. При смене в слайдере адрес заменяется на нужный согласно первому параметру. Меняем второй параметр на индекс этого изображения.

[massef]

Евгений Петров чуть было не запутался =). Вроде понял, попробую реализовать, спасибо.