Page 1 of 1

understanding a lazy load script

Posted: Tue May 05, 2015 4:57 pm
by gautamz07
hey guys i have a small problem understanding a script i got from SO , heres the thread http://stackoverflow.com/questions/3001 ... vent-paral.

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);
i have a difficulty understanding a few things I.E. the following 2 function ::

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);     
        	    }
why the

Code: Select all

img.onload = null;
??? what purpose does that serve ?

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; 
I would really appreciate if someone could answer my 1t question and tell me if my interpretation is correct ?

Thank you .

Gautam.

Re: understanding a lazy load script

Posted: Tue May 05, 2015 11:06 pm
by Christopher
Javascript programming is often event driven. This code uses the onload event for images. The loadImageSequentially() function installs an event handler for image onload/error and then loads the first image in the array. When the first image is loaded (or errors), the event handler is called. The event handler displays the image and then calls loadImageSequentially() again for the next image in the list (loadImageAtIndex + 1). That is how it loops through the array of images.

Re: understanding a lazy load script

Posted: Wed May 06, 2015 1:35 am
by gautamz07
Christopher Thanks for the valuable pointers :)

i still have one question in mind

why the following line of code ?

Code: Select all

img.onload = null; 
in the onload function ??

Re: understanding a lazy load script

Posted: Wed May 06, 2015 10:13 am
by Christopher
gautamz07 wrote:why the following line of code ?

Code: Select all

img.onload = null; 
in the onload function ??
That line removes the event handler function from the current image. I assume so it is not called again. So each iteration the code clears the current event handler and then adds an event handler to the next image.

Re: understanding a lazy load script

Posted: Thu May 07, 2015 4:01 am
by gautamz07
last question , any drawbacks if i don't do the following ::

Code: Select all

img.onload = null;
?