massef: Давайте представим логику.
1. При загрузке мы пишем в слайдер параметр, указывающий на то, какой адрес выбрать. При ресайзе окна мы согласно правилам меняем этот параметр.
2. У слайдера есть всегда другой параметр, отвечающий за номер текущего изображения. При ресайзе окна мы согласно правилам (первый параметр) меняем его источник. Только у него.
3. Предзагрузка работает по принципу — у всех изображений с индексом на несколько меньше и на несколько больше меняется источник на нужный согласно первому параметру.
Если есть предзагрузка, то при ресайзе тут же меняем адреса у этих изображений на нужный согласно первому параметру.
4. При смене в слайдере адрес заменяется на нужный согласно первому параметру. Меняем второй параметр на индекс этого изображения.
zooks: И про идентификаторы тоже мозоль натёрта — можно и нужно использовать в соответствующих ситуациях. Что за прокрустово ложе придумали такое? Обычно я это слышу от фанатов «Нужно отказаться от каскада».
zooks: Есть стандарты, которые позволяют применять практически любые символы в именах. Не следует навязывать свой стиль форматирования на основе того, что кто-то так не делает.
Влад Зайцев: В самом простом варианте вы правы — просто сменяется картинка. Если нет возврата по времени, то использовать кэш без надобности.
А Math.random() может дать коллизии и на большом числе. Метод генерирует псевдослучайные числа.
Влад Зайцев: Во-первых, Math.random() рано или поздно даст коллизии.
Во-вторых, если не даст, то решение ужасно из-за отказа от кэширования загружаемого контента.
Tratatuy: Кстати, я не понял вашего замечания про width и heigh в SVG. Это лишь говорит о том, что картинка имеет указанные размеры. С заданным background-size в 100% картинка растянется.
По задумке третий вариант должен именно растягивать картинку по горизонтали. Думаю, для сохранения вертикального размера мешает значение auto. Для обычных изображений, кстати, пропорции при таком значении будут сохранены.
Попробуйте задать background-size: 100% 3px;
Tratatuy: Благодарю за отчёт о тестировании. Ссылки я, по обыкновению, размещаю прямо в ответе. И на preserveAspectRatio есть, и на SVG можно выйти там же.
Также мне импонирует сайт Юлии Бухваловой, где есть разные исследования по SVG.
Только рамки я выношу к набору, определяющим размеры (width, height, margin, padding). Ибо если box-sizing не border-box, то чревато.
А перед этим набором display, position + координаты + clip, float, overflow.
До сих пор не могу чётко найти место трансформациям, но, скорее всего, их место — перед набором размеров.
1. При загрузке мы пишем в слайдер параметр, указывающий на то, какой адрес выбрать. При ресайзе окна мы согласно правилам меняем этот параметр.
2. У слайдера есть всегда другой параметр, отвечающий за номер текущего изображения. При ресайзе окна мы согласно правилам (первый параметр) меняем его источник. Только у него.
3. Предзагрузка работает по принципу — у всех изображений с индексом на несколько меньше и на несколько больше меняется источник на нужный согласно первому параметру.
Если есть предзагрузка, то при ресайзе тут же меняем адреса у этих изображений на нужный согласно первому параметру.
4. При смене в слайдере адрес заменяется на нужный согласно первому параметру. Меняем второй параметр на индекс этого изображения.