layout: post title: Preload Images
Sites with big images always encounter slow loading.
Now i introduce to you a brand new utility: preload-images.
This will make your sites faster than ever.
preload-images will build small images for <img> with data-preload like <img src="1.jpg" data-preload>.
And users will see some blur images first, then full clear images will be shown!
Install node.
> node -v
> means in your terminal
Install preload-images.
> [sudo] npm i -g preload-images
> preload -v
Two steps.
Modify your html, add data-preload attribute to your images, which you want it to load faster.
In your project root directory > preload.
Load small images first.
After your html and scripts loaded, load original images; and after those are downloaded to users' computer, replace small images.
Images tags with data-preload attribute will be changed in three attributes data-preload-origin, data-preload and src.
Small images will be built to preload folder beneath your original images.
A small peace of script will be appended to your html body at the bottom.
Submit new issues here
Fork me