Defer images with js

1.md

Defer images

JS

Defer images to load after page load and ensure images only for mobile or only for desktop do no load on the incorrect viewpoint.

2.js

	function updateImgs() {
		var imgDefer = document.getElementsByTagName('img');
		for (var i=0; i<imgDefer.length; i++) {
			var thisImg = imgDefer[i];
			if(thisImg.getAttribute('data-src')) {
				if($(thisImg).hasClass('visible-xs')){
					if($(window).innerWidth() <= 767){
						thisImg.setAttribute('src',thisImg.getAttribute('data-src'));
					}
				}else if($(thisImg).hasClass('hidden-xs')){
					if($(window).innerWidth() >= 768){
						thisImg.setAttribute('src',thisImg.getAttribute('data-src'));
					}
				}else{
					thisImg.setAttribute('src',thisImg.getAttribute('data-src'));
				}
			}
		}
	}

	updateImgs();

	$(window).on('resize', function(){
		updateImgs();
	});