Hi all,
With the following code I'm loading images asynchronously into an html document.
- $('input.src:hidden').each(function()
- {
- var img = new Image();
- $(img).load(function()
- {
- $('#slide').append(this);
- }).error(function(){ /*notify the user that the image could not be loaded*/ }).attr(
- {
- src: $(this).val()
- });
- });
- <input class="src" type="hidden" value="img/visuals/18.jpg" />
- <input class="src" type="hidden" value="img/visuals/19.jpg" />
- <input class="src" type="hidden" value="img/visuals/20.jpg" />
- <input class="src" type="hidden" value="img/visuals/21.jpg" />
As you can see there are some hidden fields in the document that hold the source locations of the images. By looping trough them the images are being loaded, but not as expected. I'd expect them to always be in the order of 18, 19, 20, 21 but instead of that images get loaded, well for as far as I can see, pretty randomly...
How can this be and is there a solution? All help appreciated :)