Loading bar

HTML

<div class="contain">
    <img data-src="https://ununsplash.imgix.net/photo-1414502622871-b90b0bec7b1f?q=75&fm=jpg&s=204c6064e8198b2ba44f367adf8ec819" />
    <img data-src="https://ununsplash.imgix.net/photo-1417024321782-1375735f8987?q=75&fm=jpg&s=7af3f809a9c1b90b7fcbd71655b661bc" />
    <img data-src="https://unsplash.imgix.net/photo-1418065460487-3e41a6c84dc5?q=75&fm=jpg&s=127f3a3ccf4356b7f79594e05f6c840e" />
    <img data-src="https://unsplash.imgix.net/photo-1418479631014-8cbf89db3431?q=75&fm=jpg&s=478a9a2196033db7c0bf3c8ba3707f4d" />
</div>

CSS

.contain{
    width: 60%;
    margin: 50px auto;
}
.contain > img{
    display: block;
    width: 100%;
    margin: 0 0 50px;
}
.contain > img:last-child{
    margin-bottom: 0;
}

JavaScript

var d = document;
var assets = d.getElementsByTagName("img");
var loaded = 0;

for(var i = 0; i < assets.length; i++){
    var asset = assets[i];
    var src = asset.getAttribute("data-src");
    console.log(assets[i].naturalWidth);
    asset.setAttribute("src", src);
    console.log(assets[i].naturalWidth);
}