I am in search of the most effective approach to alter the src attribute for multiple images on a page post-loading. Essentially, I need to reorganize them for better display.
In their initial arrangement, they are presented as follows:
1 5 9
2 6 10
3 7 11
4 8 12
I have crafted a jQuery function that repositions them like this:
1 2 3
4 5 6
7 8 9
10 11 12
The rearrangement seems flawless in theory, but when attempting to modify the src of the image, it results in reloading the same image multiple times and other unexpected behaviors.
This is how I am altering the src
$('img[src="image.png"]').attr('src', 'newimage.png');
Here is a fiddle link with the function I utilize for rearranging. The mentioned line can be found on line 91.
https://jsfiddle.net/4o17Ldxu/
In the fiddle, by clicking "generate swap list" and inspecting your browser console, you will see the suggested image swaps, all accurate. However, upon pressing the button again and selecting "now rearrange," it triggers various glitches.
Is there a way to prevent this behavior? Alternatively, is there a more efficient method for swapping/rearranging images in this manner?