jQuery 重新排列/交换 img src 会导致照片重新加载出现故障

jQuery rearrange/swap img src causes glitched reloading of photos

本文关键字：新加载 照片 加载 故障 img 排列 新排列 交换 src jQuery      更新时间：2023-09-26

我不确定最好的方法是什么，但我必须在加载页面后更改页面上多个图像的src属性。可以这么说，我需要重新排列它们。

在原始格式中，它们显示如下：

1    5    9
2    6    10
3    7    11
4    8    12

我写了一个jQuery函数，像这样重新排列它们：

1    2    3
4    5    6
7    8    9
10   11   12

重新排列在理论上工作正常，但是当需要实际更改图像的src时，它会多次重新加载相同的图像和其他奇怪的行为。

这就是我改变src的方式 

$('img[src="image.png"]').attr('src', 'newimage.png');

这是一个包含我用来重新排列的功能的小提琴。上面的一行在第 91 行。

https://jsfiddle.net/4o17Ldxu/

在小提琴中，单击"生成交换列表"并查看浏览器控制台，您将看到它告诉您应该在哪里交换哪些图像，那里的一切都很完美，但是当您再次单击按钮并单击"现在重新排列"时，它会导致所有故障。

有没有办法防止这种情况？或者有没有更好的方法来以这种方式交换/重新排列图像？

我认为问题在于您实际上并没有"交换"图像 - 您将第一个图像设置为等于第二个图像，而第二个图像保持不变。例如，您的代码日志：

Swap Photo 4 with Photo 2

但它实际在做的是：

$('img[src="image.png"]').attr('src', 'newimage.png');

此操作完成后，您的页面中将有两个与选择器img[src="newimage.png"]匹配的<img>标记。 在后续步骤中，如果您尝试使用 src="newimage.png" 选择所有图像，您最终将替换多个图像的src。

相关文章：