JQuery манипулирование именами файлов

Question

Я пытаюсь создать эффект размытия / затухания (что означает, что мне нужно 2 изображения), но я хочу загрузить только 1 в HTML (если js не активен) и добавить другое имя файла через jQuery (копирование и переименование файла / SRC)

Чистый HTML имеет вид:

<div id="work">
 <div>
  <img src="css/images/abc1.jpg" width="360" height="227" alt="" />
 </div>
 <div>
  <img src="css/images/xyz1.jpg" width="360" height="227" alt="" />
 </div>
</div>

Но HTML после jquery манипулирует DOM должен выглядеть так:

<div id="work">
 <div>
  <img src="css/images/abc0.jpg" width="360" height="227" alt="" />
  <img src="css/images/abc1.jpg" width="360" height="227" alt="" />
 </div>
 <div>
  <img src="css/images/xyz0.jpg" width="360" height="227" alt="" />
  <img src="css/images/xyz1.jpg" width="360" height="227" alt="" />
 </div>
</div>

Вопрос в том, что такое jQuery для клонирования / копирования относительных изображений, а затем переименования src?

Любая помощь будет очень ценной.

A.

Answer 1

Единственная проблема, которую я вижу в том, чтобы сделать это так, как вам хотелось бы, - это то, что вы можете столкнуться с проблемами блокировки при попытке загрузки файлов JS, поскольку это клонирует код. Ваш JS будет ждать загрузки каждого файла во время итерации по коллекции.

Более простой способ - просто спрятать второй файл в каждом разделе размытия с помощью CSS. Таким образом, активы могут быть распараллелены и все еще будут работать без JS.