Looking to enhance website performance by lazy loading images. Plan is to initially display a set number of images and then load the rest lazily. Here's what I have currently:
<div> <img src="http://i.imgur.com/CmU3tnl.jpg"> 1 </div>
<div> <img src="http://i.imgur.com/TDdxS9H.png"> 2 </div>
<div> <img src="http://i.imgur.com/39rpmwB.jpg"> 3 </div>
<div> <img src="http://i.imgur.com/1lBZQ1B.png"> 4 </div>
<div> <img src="https://i.imgur.com/Y5Ld4Qfh.jpg"> 5 </div>
<div> <img src="http://i.imgur.com/8HumESY.jpg"> 6 </div>
...
<a href="#" id="loadMore">Load More</a>
body {
background-color: #f6f6f6;
width: 400px;
margin: 60px auto;
margin-top: 5px;
font: normal 13px/100% sans-serif;
color: #444;
}
img{
width:30px;
height:30px;
}
...
(function() {
var divElements = [].slice.call(document.querySelectorAll("div"));
var loadMore = document.querySelector('#loadMore');
var divNumber = 2;
loadMore.addEventListener('click', function(e) {
e.preventDefault();
for (var i = 0; i < divNumber; i++) {
window.scrollTo(0,document.body.scrollHeight);
if (i < divElements.length) {
divElements[i].style.display = 'block';
}
if (i >= divElements.length) {
loadMore.innerHTML = "Load Completed";
return;
}
}
divElements.splice(0, divNumber);
});
})();
loadMore.click();