Lazy Load Mashup

August 3, 2016 4:05 pm Published by Leave your thoughts

Firstly, what is lazy loading?

According to wikipedia, lazy loading “is a design pattern commonly used in computer programming to defer initialization of an object until the point at which it is needed. It can contribute to efficiency in the program’s operation if properly and appropriately used.”

In context of web development, lazy loading images, which makes up more than 50% of any typical website content in terms of file size, is critical in boosting the page loading speed.

There are more lazy loading plugins than you can shake a stick at.

Advanced-lazy-load

Some have jQuery dependency or other dependencies. Some are stand alone plugin written in pure javascript.

I needed to replace a lazy load plugin (BJ Lazy Load) which stopped working for me awhile ago. Since I removed jQuery dependency on my latest WordPress theme, I needed a pure javascript solution anyhow.

I’ve looked at some lazy load plugins that have no dependency. Echo.js, developed by Todd Motto for Intel’s HTLM5 Hub project caught my eye in particular.

echo.js

https://toddmotto.com/echo-js-simple-javascript-image-lazy-loading/

Clean and object oriented, I thoroughly enjoyed going through the echo.js codes.

However, even this clean version of lazy loading seemed convoluted to me because every plugin seems convoluted to me. I just don’t like plugins, period. haha

So I’ve decided to write my own lazy loading script.

My idea was simple. Start out with img tag with “lazy” instead of “src”

So my initial html mark-up would be like this.

<img lazy="http://lorempixel.com/400/200"/>

And the javascript would swap out the word “lazy” with “src” so that the image would load.

// I fist select all images that have "lazy" selector
var imgs = document.querySelectorAll('[lazy]'); 
// swapping the value of "lazy" to "src" 
imgs.src = imgs.getAttribute('lazy');
// removing the value of "lazy"
imgs.removeAttribute('lazy');

The above javascript simply works.

I did find David Walsh’s lazy load script afterwards which is equally simple as mine & follows the same idea.

[].forEach.call(document.querySelectorAll('img[data-src]'), function(img) {
	img.setAttribute('src', img.getAttribute('data-src'));
	img.onload = function() {
		img.removeAttribute('data-src');
	};
});

https://davidwalsh.name/lazyload-image-fade

I hope you noticed that my code achieves the same objective as David Walsh’s code without the use of [].forEach.call.

While David Walsh is years beyond me and is a much better coder than me, I wanted to object to his use of [].forEach.call.

Sure enough, Todd Motto states 11 different reasons why [].for.Each.call should be avoided on his blog.

https://toddmotto.com/ditch-the-array-foreach-call-nodelist-hack/
Todd Motto really knows his stuff!! I guess that’s why he works at Google? duh…. haha

In no way I am being critical of David Walsh. I am not qualified to criticize him. I’ve learned so much from David Walsh’s blog over the years.

I just think that David Walsh could have written his code better for lazy loading.

Tags: , , , ,

Categorized in:

This post was written by hackya

Leave a Reply

Your email address will not be published. Required fields are marked *