Get real time updates directly on you device, subscribe now.
In this article, we will discuss the new tool AntiModerate – Progressive Image Loading Library. Excess use of jquery plugins made a bad impact on the site and increase the load time of the website.
Table of Contents
Today, we discuss a tool AntiModerate – Progressive Image Loading Library
This is open source free js plugin, which helps us to reduce the page size and load time will decrease automatically. The main feature of this plugin is load all the images when they appear in a view.
The entire page loads fastly, after using this plugin. This will create a placeholder with blurred microimages. In the background process, all the images loaded in full-sized which replaced after the page load process finish.
Installation
You can use the given commands for npm or bower.
// Bower Js bower install antimoderate // Node Js npm install antimoderate --save
Also, you can add the Js plugin file in your app footer, then use it.
Example
<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>Conclusion
AntiModerate Js is a wonderful library, which offers the rich feature to decrease the page size and page load time. You can check the official plugin page for more details. So, feel free to add the comment if any query. You can found more resource here.
If you like our content, please consider buying us a coffee.
Thank you for your support!
Buy Me a Coffee