Recently delving into using AngularJS in my projects has presented a rather significant issue when utilizing ngRepeat to load thumbnails from a dynamic array into a DIV.
While I won't dive deep into the entire application's details here, let me illustrate an isolated scenario where this problem arises.
Let's take for example an image tag with the ngRepeat directive like so:
<img ng-repeat='n in [] | range: explorer.loadedLog.screenshotsNum' ng-src='getss.php?degenerated={{explorer.selectedLog}}&index={{n+1}}'>
Assuming that 'range' is a custom filter that generates an array with 'explorer.loadedLog.screenshotsNum' (a variable modified by AJAX requests) elements, and 'explorer.selectedLog' is a string also modified by AJAX requests. Despite these specific details, similar problems arise with common dynamic arrays as well.
The crux of the matter lies in this: whenever 'explorer.loadedLog.screenshotsNum' and 'explorer.selectedLog' are altered, all new images need to be loaded.
I have a button to modify these values. Clicking it for the first time during initial load works fine. However, if I change the values before all images finish loading, it will first load all remaining old images before proceeding with the new ones.
Essentially, even though I expected modifying these variables to halt loading of "old" images, they continue loading in the background, delaying the load of the "new" images. This behavior seems tied to how ngRepeat functions, but I'm hoping there's a solution that involves minimal changes.
If resolving this issue means sticking with ngRepeat, that would be ideal. Yet, I am open to any alternative suggestions.
EDIT:
A realization struck me: setting "src" initiates a request to the server, which persists even if you remove or alter the img src attribute. Thus, the issue isn't solely related to ngRepeat but pertains to the inherent behavior of the <img> element. In my case, window.stop() sufficed (given no restrictions in my application), although I pondered how to deal with other concurrently loading images without resorting to window.stop(). Is there a way to prevent each <img> within a container from loading individually?