jQuery重新排列/交換IMG SRC導致小圖片重新加載

Question

我不確定這是最好的方法是什麼，但我必須更改頁面上的多個圖像的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/

在小提琴，單擊「生成交換清單」，並期待在您的瀏覽器控制檯，你會看到，它會告訴你哪些圖像應該換地方，一切有完美的，但是當你再次點擊按鈕並點擊「現在重新排列」它會導致所有的毛刺。

反正有防止這種情況嗎？還是有更好的方式去以這種方式交換/重新排列圖像？

Answer 1

我認爲問題在於你實際上並沒有「交換」圖像 - 你將第一張圖像設置爲等於一秒，而第二張圖像保持不變。例如，你的代碼記錄：

Swap Photo 4 with Photo 2 

但是它實際上做的是：這個操作完成

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

後，你會在你的網頁在兩次<img>標籤，即可選擇img[src="newimage.png"]匹配。在後續步驟中，如果您嘗試使用src="newimage.png"選擇所有圖像，則最終將替換多張圖像的src。