AntiModerate - progressive image loading library
Reduce loading time of page to less than a second on slow connections by loading and rendering nicely blurred micro images on the page while loading full sized images in background which replace as they finish.
<img src="1.jpg" id="picture" style="width:200px; height:200px;" data-antimoderate-idata="data:image/jpg;base64, /9j/4AAQSkZJRgABAQEASABIAAD//gATQ3JlYXRlZCB3aXRoIEdJTVD/2wBDAAoHBwgHBgoICAgLCgoLDhgQDg0NDh0VFhEYIx8lJCIfIiEmKzcvJik0KSEiMEExNDk7Pj4+JS5ESUM8SDc9Pjv/2wBDAQoLCw4NDhwQEBw7KCIoOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozv/wgARCAAlACgDAREAAhEBAxEB/8QAGQAAAgMBAAAAAAAAAAAAAAAAAwQCBQYB/8QAGAEBAQEBAQAAAAAAAAAAAAAAAAEDAgT/2gAMAwEAAhADEAAAAeyqgi0iYKg56Gw9ZfX4JRCq+VfjV3TGxgdZhFKcNJyNWUpYOajl/8QAHxAAAgICAgMBAAAAAAAAAAAAAQIAAwQTEjERISQj/9oACAEBAAEFApdZrVbrEMHcYeLba9og7mXbqV8rYtF/KDuZLfWCFisDMdi1XGZdf1mv1UnrFH4//8QAHREAAgIBBQAAAAAAAAAAAAAAAQMAESACITAxMv/aAAgBAwEBPwHJfqMXfeANGMcdW3L/AP/EABsRAAEFAQEAAAAAAAAAAAAAAAECEBEgMQAD/9oACAECAQE/AaHGXnJXGMcdPnBljlTlT3//xAAfEAABAwQDAQAAAAAAAAAAAAABAAIxEBEhQRITgSD/2gAIAQEABj8CWJMIdkHdBRrrD1C+vhuLklcW+ri+avvrAq0mj8qVMJq//8QAIhAAAgIBBAEFAAAAAAAAAAAAAAERITFBUWFxkbHB0eHx/9oACAEBAAE/IYI5QxhRpOOFiQvmILCNOAmRSllbCQleyBSOkLwNsFFSdlOjS9xKdkD062BtQ2+BNCcmRf7Ox2uHjg/IJ29AqZw/c//aAAwDAQACAAMAAAAQEOE8lCmMc38Gf//EABsRAQEBAAIDAAAAAAAAAAAAAAERABAgITGx/9oACAEDAQE/ENdE99HAzAa5PnSA4GPBryMeTt//xAAcEQACAwEAAwAAAAAAAAAAAAAAARARMSEgQbH/2gAIAQIBAT8QKLTyNI7Lnr2+xpDVqhdjRo0irU7eCOk0f//EACMQAQACAQIGAwEAAAAAAAAAAAEAESExQRBRYXGRsYGh8OH/2gAIAQEAAT8QY1kLJt1lp1AlBtacDwD3w6OoWqqKZIsZhNz5cHxL3DohlQbSiDWOaXAsbyekoCxhs/3PFvcIXeoGOCjP2sHK5vNc+ZaAjvRMyjwvOqX9Q/BMZpfgOs06dPzWbBYd0W5aw07p/9k=">
<script src="antimoderate.js"></script>
<script>
var img = document.getElementById('picture');
AntiModerate.process(img, img.getAttribute("data-antimoderate-idata"));
</script>
Related posts by tag
- 07 Nov 2024 daisyUI — Tailwind CSS Components
- 04 Mar 2024 Using personal gems with Bundle without bothering your colleagues.
- 12 Jul 2023 Protomaps - A serverless system for planet-scale maps