Как подменить src у img в цикле?

Question

[Максим]

Есть самодельный слайдер, так как он загружается долго из за количества изображений в нём.
я хочу вывести одно изображение но в цикле (без конечно) менять src у этого img

Механизм самого слайдера такой: я за ранее знаю количество изображений - 298 шт ...я их получаю и вставляю в блок и этот блок смещаю влево а потом возвращаю на ноль со скоростью 50ms или 24кадра в секунду и так создаётся иллюзия что это видео ...

Смысл этих танцев с бубном было создание кроссбраузерной видео презентации - я пошёл именно таким путём дабы не загружать несколько виде форматов на сервер и думать о том что на apple или на android не будет работать - всё тип топ но хотелось бы снизить нагрузку ...

Как можно в цикле и без конечно менять src у одной и той картинки ?

Comments

[Даниил Попов]

1. полностью ваш код можно загрузить на jsfiddle и оставить ссылку
2. картинка начнет загружаться только когда вы добавите ее в html, может случится так, что смена кадра будет происходить раньше полной загрузки изображения. Первоначальная загрузку, конечно будет быстрее, но вот результат, скорее всего, вас расстроит

[Алексей Ярков]

Хотел показать сгенерированный html но: Текст вопроса не может быть менее 30 и более 10 тысяч символов

Всякие песочницы типа jsfiddle, codepen и т.п.:

[Максим]

Алексей Ярков, а как я туда затолкаю 298 изображений ? если хочешь я скину ссылку на dropbox ? там будет всё сразу

[Максим]

Алексей Ярков, в html просто .slider>.polosa и всё + script:src => app.js

[Алексей Ярков]

Максим Ленский,

а как я туда затолкаю 298 изображений ?

Ну если это причина не делать пример в песочнице, то я умываю руки ))
Просто оставлю это здесь: https://codesandbox.io/s/vanilla?file=/src/index.js

[Максим]

Алексей Ярков, добавил песочницу

Answer 1

[Spaceoddity]

let img = document.querySelector(".img");
for(let i = 0, i < response.data, i++ ) {
  img.setAttribute("src", response.data[i]);
}

Ну и вместо setTimeout есть специальный метод для этого: https://developer.mozilla.org/ru/docs/Web/API/wind...

Comments

[Максим]

я умею пользоваться requestAnmationFrame он не нужен мне в данный момент

[Максим]

а что такое response.data ?

[Spaceoddity]

Максим Ленский, массив со значениями src. Так обычно именуют ответ аякса.