jQuery manipulation de nom de fichier

Question

J'essaie de faire un effet flou/fondu (ce qui signifie que j'ai besoin de 2 images) mais je veux seulement charger 1 dans le HTML (si js n'est pas actif) et ajouter l'autre nom de fichier via jQuery (copier et renommer le fichier/src)

le html pur est le long des lignes de:

<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> 

Mais le code html après jquery a manipulé les DOM doit être comme:

<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> 

La question n est, quel est le jQuery à cloner/copier les images relatives, puis renommez le src?

Toute aide serait très appréciée.

A.

Answer 1

Le seul problème que je peux voir de ce faire la façon dont vous voulez est que vous pourriez rencontrer des problèmes de blocage lorsque vous essayez d'avoir la JS charger les fichiers comme clone le code. Votre JS attendra que chaque fichier soit téléchargé pendant que vous parcourez la collection.

Une manière plus propre pourrait être pour vous de simplement cacher le deuxième fichier dans chaque section de flou en utilisant CSS. De cette façon, les actifs peuvent être parallélisés et fonctionneront toujours sans JS.