Seeking to create a plugin for sequential image downloads using MooTools. Assuming there are images with the img tag inside a div with the class imageswrapper. The goal is to download each image in order, one after the other until all images are loaded.
window.addEvent('domready', function(){
// retrieve all images within the div with the class 'imageswrapper'
var imagesArray = $$('.imageswrapper img');
var tempProperty = '';
// hide the images and assign the 'data-src' attribute to prevent background downloading
for (var i=0; i<imagesArray.length; i++) {
tempProperty = imagesArray[i].getProperty('src');
imagesArray[i].removeProperty('src');
imagesArray[i].setProperty('data-src', tempProperty);
}
tempProperty = '';
var iterator = 0;
// select the container where pictures will be inserted
var injDiv = $$('div.imageswrapper');
// recursive function that triggers when a new image is loaded
function imgBomber() {
// base case for recursion
if (iterator > (imagesArray.length-1)) {
return false;
}
tempProperty = imagesArray[iterator].getProperty('data-src');
imagesArray[iterator].removeProperty('data-src');
imagesArray[iterator].setProperty('src', tempProperty);
imagesArray[iterator].addEvent('load', function() {
imagesArray[iterator].inject(injDiv);
iterator++;
imgBomber();
});
} ;
imgBomber();
});