Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Easy-peasy image optimizer in jQuery. Enables page-wide lazy-loading.
/**
* jQuery Image Optimizer
* Lazy-loads images + background-images
* by Matheus Pratta <https://github.com/MatheusMK3>
*/
window.optimize_images = () => {
// Placeholder image, should be a 1x1 GIF in base64
var placeholder = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
// Loaded events so we can have same images multiple times
var images_events = {};
var image_hook = (url, event, data) => {
// Test if hook already exists
if (!images_events[url]) {
// Create image
var image = new Image();
image.onload = function () {
// Get the image hooks
var e = images_events[this.src];
// Set as loaded
images_events[this.src].loaded = true;
// Execute hooks
for (var i = 0; i < e.hooks.length; i++) {
var hook = e.hooks[i];
console.log(e, hook);
hook.fn.call(hook, this);
}
};
// Create hook
images_events[url] = { image: image, loaded: false, hooks: [] };
// Start download
image.src = url;
}
var $img = images_events[url];
var hook = { image: $img.image, data: data, fn: event };
// Test if already done
if ($img.loaded)
return event.call(hook, hook.image);
// If not done, add to hooks
images_events[url].hooks.push(hook);
};
// Scan all elements for background-images
var filter_background = $('*').filter(function () {
var bak = $(this).css('background-image');
return bak.length > 0 && bak != 'none';
});
// Replace with transparent image
filter_background.each((i, o) => {
// Regex the URL from inside url('...')
var $el = $(o);
var img = $el.css('background-image');
var url = /url\(?\'?\"(.+)?\'?\"\)/ig.exec(img);
// Only work with URL
if (url[1]) {
// Select the URL
url = url[1];
// Generate preloader
image_hook(url, function () {
$(this.data.target).css('background-image', 'url("' + this.image.src + '")');
}, { target: o });
// Remove original imag
$el.css('background-image', 'none');
}
console.log(img, url);
});
// Now we do the same for <img> tags (which are WAAAY easier)
var filter_images = $('img').filter(function () {
return this.src.length > 0;
});
// Now just create the same preloader routine
filter_images.each((i, o) => {
var url = o.src;
image_hook(url, function () {
this.data.target.src = this.image.src;
}, { target: o });
o.src = '';
});
};
/**
* USAGE:
* Add this to your page whenever you want to run the optimizer. You can even "STOP" the downloads from the browser if you want.
* window.optimize_images();
*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.