jQuery 文件名操作

Question

我正在尝试做一个花哨的模糊/淡入淡出效果（这意味着我需要 2 个图像）但我只想在 HTML 中加载 1 个（以防 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>

但是 jquery 操作 DOM 后的 html 需要是这样的：

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

问题是，克隆/复制相关图像然后重命名 src 的 jQuery 是什么？

任何帮助将不胜感激。

一个。

Answer 1

我能看到的唯一问题是，在尝试让 JS 在克隆代码时加载文件时，您可能会遇到阻塞问题。当您遍历集合时，您的 JS 将等待每个文件下载。

一种更简洁的方法可能是使用 CSS 简单地隐藏每个模糊部分中的第二个文件。这样资产可以并行化，并且在没有 JS 的情况下仍然可以工作。