understanding a lazy load script

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
gautamz07
Forum Contributor
Posts: 331
Joined: Wed May 14, 2014 12:18 pm

understanding a lazy load script

Post 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.
User avatar
Christopher
Site Administrator
Posts: 13596
Joined: Wed Aug 25, 2004 7:54 pm
Location: New York, NY, US

Re: understanding a lazy load script

Post 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.
(#10850)
User avatar
gautamz07
Forum Contributor
Posts: 331
Joined: Wed May 14, 2014 12:18 pm

Re: understanding a lazy load script

Post 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 ??
User avatar
Christopher
Site Administrator
Posts: 13596
Joined: Wed Aug 25, 2004 7:54 pm
Location: New York, NY, US

Re: understanding a lazy load script

Post 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.
(#10850)
User avatar
gautamz07
Forum Contributor
Posts: 331
Joined: Wed May 14, 2014 12:18 pm

Re: understanding a lazy load script

Post by gautamz07 »

last question , any drawbacks if i don't do the following ::

Code: Select all

img.onload = null;
?
Post Reply