Remove Loader

Remove Loader on DOM ready and all images are loaded

by Jordan Enev

HTML

<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script src="https://npmcdn.com/[email protected]/imagesloaded.pkgd.js"></script>
<span class='loader'>Loading ...</span>
<img width="200" src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png?v=9c558ec15d8a" />

CSS

img {
	display: none
}

JavaScript

// DOM is ready
$(function() {
    // We have to make sure that all of the images are loaded in the container
    $('body').imagesLoaded( function() {
        // Images are loaded
        $('.loader').hide();
		$('img').show();
    });
});