Categories
Javascript Snippets

Forced to Care About Internet Explorer: lazy loading

If you work in the public sector you’ll be forced to care about IE and especially speed and as is the public sector you need to spend as little time as possible time on any project.

So we tried every lazy load library we could find and consistently found issues with all of them using modern Javascript so I decided to just make a simple script using old Javascript and it just works

var replaceSrc = function () {
	x = document.getElementsByClassName('lazy-load-me');
	for (i = 0; i < x.length; i++){
		if (x[i].getBoundingClientRect().top < window.innerHeight) {
			img = x[i]
			if(window.innerWidth < 850 && x[i].getAttribute('mobi-src') != null){
				lazySRC = x[i].getAttribute('mobi-src');
			}else{
				lazySRC = x[i].getAttribute('desk-src');		
			}
			if(x[i].tagName == 'VIDEO'){
				x[i].canPlayType("video/mp4");
				x[i].src = lazySRC;
				x[i].load();
				x[i].onload = x[i].play();
				x[i].classList.remove("lazy-load-me");
			}else{
				x[i].src = lazySRC;
				x[i].classList.remove("lazy-load-me");
			}
		}
	}
};
replaceSrc();
window.addEventListener('scroll', replaceSrc, false);