Easy-peasy image optimizer in jQuery. Enables page-wide lazy-loading.

image-optimizer.js

/**
 * 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();
 */