the script is as follows ::
Code: Select all
var images = [
{ src: 'img/1.jpg', alt: 'I am the first image' },
{ src: 'img/2.jpg', alt: 'Second image' },
{ src: 'img/3.jpg', alt: 'third image' }
];
function loadImageSequentially(imagesArray, appendTo, loadImageAtIndex) {
if (!loadImageAtIndex) loadImageAtIndex = 0; // assume first loading if not provided.
if (!imagesArray[loadImageAtIndex]) return;
var img = new Image();
// attach listeners first
img.onload = function() {
appendTo.appendChild(img);
loadImageSequentially(imagesArray, appendTo, loadImageAtIndex + 1);
}
img.onerror = function() {
// remove the onload listener
img.onload = null;
img.src = 'error.png';
// life goes on...
appendTo.appendChild(img);
loadImageSequentially(imagesArray, appendTo, loadImageAtIndex + 1);
}
// assign attributes, which will start the loading.
img.src = imagesArray[loadImageAtIndex].src;
img.alt = imagesArray[loadImageAtIndex].alt;
}
// now run it.
var appendTo = document.getElementById('gallery')
loadImageSequentially(images, appendTo);
Code: Select all
img.onload = function() {
appendTo.appendChild(img);
loadImageSequentially(imagesArray, appendTo, loadImageAtIndex + 1);
}
img.onerror = function() {
// remove the onload listener
img.onload = null;
img.src = 'error.png';
// life goes on...
appendTo.appendChild(img);
loadImageSequentially(imagesArray, appendTo, loadImageAtIndex + 1);
}Code: Select all
img.onload = null;secondly , are the event handlers I.E. onload and onerror called when the img is loaded or constructed on the below lines ??
Code: Select all
img.src = imagesArray[loadImageAtIndex].src;
img.alt = imagesArray[loadImageAtIndex].alt; Thank you .
Gautam.