Project Image Loader

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

This is a background image

How to implement:

Download the needed files here: Preloader Pack Plus™

Included in the pack are the javascript file preloaderImage.js and stylesheet _preloaderImage.scss needed for the plugin, just include it to your project.

You need to add the jQuery first just below the footer.

Add this line of script to initialize the loader.

<script>
$('.self-image-loader').preloadImage();
<script>

To apply the preloader, add the class names of self-image-loader and blurry. The preloadImage() will find each of these elements and apply the loading effect.

For the src of the <img>, place the path of the low-resolution asset. This will be used to temporarily show the image. Place the path of the high-resolution image on the attribute data-large

<img class="self-image-loader blurry" src="url_to_small_asset" data-large="url_to_high-resolution_asset" alt="">

As for the elements with a background image, add class name self-image-loader only. Place the path of the high-resolution image on the attribute data-large

<div class="self-image-loader bg-image" data-large="url_to_high-resolution_asset">
<p>This is a background image</p>
</div>

Now isn't that a breeze? Now you're done. Let's code some!

Sample Aspect Ratios

This pack also includes some ready-made aspect ratios. See examples below:

Aspect Ratio 1:1

.ar-1x1

Aspect Ratio 4:3

.ar-4x3

Aspect Ratio 3:2

.ar-3x2

Aspect Ratio 8:5

.ar-8x5

Aspect Ratio 16:9

.ar-16x9

How to use:

Wrap the <img> with a container <div> and add the class img-container and the desired aspect ratio class.

See sample markup below:

<div class="img-container ar-16x9">
<img class="self-image-loader blurry" src="url_to_small_asset" data-large="url_to_high-resolution_asset" alt="">
</div>

That's just it. Happy coding!

Preload your images with style!