whackashoe / antimoderate

The progressive image loading library for great good!

AntiModerate

The progressive image loading library for great good!

---

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.

Has a nice blur effect thanks to StackBlur so you have a good looking page while it is loading.

Library is space optimized, with gzip it is less than 2kb.

##Installation

You can install this using bower or npm:

  bower install antimoderate

  npm install antimoderate --save

##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>

##License

###AntiModerate

Copyright (c) 2016 Jett LaRue

Do whatever with it.

###StackBlur Algorithm

Copyright (c) 2010 Mario Klingemann

Permission is hereby granted, free of charge, to any person
obtaining a copy of this software and associated documentation
files (the "Software"), to deal in the Software without
restriction, including without limitation the rights to use,
copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the
Software is furnished to do so, subject to the following
conditions:

The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
OTHER DEALINGS IN THE SOFTWARE.

antimoderate's Issues

Add bower integration

Can I add bower integration, so users able to install this library using bower.

Info about the license unclear

Hi :)

I have a short question about the correct license of your repo. In the bower.json it's listed with MIT bit in your readme it looks like CC-0 or public domain ("Do whatever with it"). I wanted to add your repo to a CDN and want to add the correct license there.

Thank!

Expected behavior happening in reverse.

So, Antimoderate seems to be working insofar that it "knows" about my tiny image and my regular thumbnail.

To be clear, my problem is that I get the large image first and then it is replaced by the small image.

Am I doing something wrong?

Thanks.

Here is my HTML:

<img src="image.php?f=thumbs/clock_thumb.png" class="center-light thumbnail" style="width:200px; height:200px;" data-antimoderate-idata="data: image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAAA1CAYAAAC+2+58AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4AQTFgEb5mnI/AAABM5JREFUeNrtnNtu3DYQhr8hKXF33Tq5aNGLPkUu8gJBXjvv0yBt4LjeXZ3I6YVNmauDj2mctBxAMKChfg3nH45O/1pUVSn2YmZKCgoBhYBihYBCQLFCQCGg2Lc3NwxDycJLEvDhw4eShe+BgPJA/O1NVZG3b9/qEgEiMhv8o/qXiutr4Kcxqvro49M+pxpBYequ6xpjrq/RXdcRYzzxW2vx3gMQQqBpmhNg7z273Q6Atm05HA4nQXnvsdYC0DTNDN85x2azQUTo+57j8Tj6oipnZ2fXfmC/39M0zQl+Xdcjftu2hBBO8KuqYrvdjvPL8VWV3W43+g+HA8fjccQXETZ+w6vzVyhK0zRcfLk4Of78/HzM4eXlJV3XzUhQVVyUDQiAItpBNmjK4lIVichscsmXCLzr2Pv80zFGhEqEjbV4YxhW4rwP/65zTONf9Huwrw1ERXRe7el4a+1qHMYYXKu/ImIQIhV/IPR3LmVjzMhkjHE1ySIyjkt/83334avqIn7lHK9j5GdrQZWLmziWzpkSkXwJ7yHx53HP8A3oq0j7+xEJQh865KMQucVL8a8lPxHkWn5DsFgJVPoJbgjoum5sNQkoTUhVCSFwOBzGCeWTT22j6zpEhGEYZhNNLcMYs4g/DANd151UoapSW8sv1lL3PV8uL7kA+hBm+Cn+hD8tjBTfWvxt245tNSzgH/wVf/lP2MGi0bDVHchtYq+urlDVMX+rBHT6M6IVTnpUDTJhP6/Y6b4l4Hx8SuxSpU0rdAl/enFTVawIZ4AX4RgCegf+WmzPjl+UYTOwP9/jeoepanacPQo/tb7yJPxEC8SbTUHKq4hvfw8voKKoPO/5qRDwdApArokoK6C8DS1WCCgEFCsEFAKKFQIKAcUKAYWAYoWAQkCxQkAhoNi9BNwIK0B+LF2QivwnCHBIQBCEyFyc8n1aFBk3/eFXgAaEAWFYJeDfVs09Bl9FCNn2tfEfF3i2PXHezukFgsEQgFP1wH2TmarDpjZ+eM6kIFNf2pZEAMaYE5kKXCsU/hahFqERQW7GPQX/qfGrgtlb/KcNJljc0aHpC1n20X0p/jyPqoqr+RPR6xYk3AqsrLUYY0ZVwFTBUFUVzjmMMfR9T9/3J/IOYwzee4wxdF03+sfe5xze+1EC0rbtCb5zjqqqTvABuhC4ALbOobsdPxnDsWnuxO+6bqac896PyrV0/jx53nucc4gIh8OBYRhu8RW2+x3bzzskCEMbiESE0/yk+LuuG5VxKT9JN+Q8n0dQkTirvryC8kqy1o4TmCrjEvt1XY8EpgTmBHvviTGSJPI5fi5NzI/vQ+AL0KtSe48TwQ3DKn7SME3x8yLLJSf5ikgEVFVFLuMXFaqrmu3HLRqV5tBwlOMsP6kApz8ByElwVvrVFrbWOxNA0r2sjcuVaFPhU2ona8LWlLj58ld6EdoQkAVB1zS+tHqn+HkbeIh/purrgcNN/x/W83Pf9UfevHmzOCKviiWBUV45aaJTfxLHxhhnqyT3hxAWxb9pBQ7DMFO35f116fzp+DX8h8wxxZcwHjP/h5xfVXHv3r179h3MfRfs79X/te7ennN+9/79+/I4+oImIYTy05iXJKD8s47yMq4QUKwQUAgoVggoBBQrBPzv7B9y+cxPbcg6AgAAAABJRU5ErkJggg==" antimoderate>

Here is my JS:

 if (AntiModerate !== undefined && $ !== undefined) {
                    console.log("AntiModerate is ready to blur your images!");
                    //
                    $( "[antimoderate]" ).each(function( index, obj ) {
                        AntiModerate.process(obj, obj.getAttribute("data-antimoderate-idata"));
                    });
                }

Errors in example

I'm guessing var img should be var picture

Is this just for <img/>?

I am planning to use it on a component in react, is this okay? Or will it behave unnaturally?

better readme / usage guide

thanks for this idea. what is the best way to populate the data variables for each image in PHP? the readme has no explanation of this aspect of this project and so updating the readme to include full instructions would be a great help.

Support background-image

Two Requests

This is funny, there is 2 requests for the base64 encoded image : one for jpeg & one for png.

Where does this come ?

By the way, your lib is working great, thanks :)

support (plugin)

Hi.

the plugin looks impressive, but I would like to see a more concrete example on the operation.
I don't understand how to use this plugin. When the base64 image is shown and when is hidden? whom control this status? me or this plugin does that?

Browser Compatibility

Which browsers are supported?

Publish demo on github pages

img srcset support (question)

Hi.

This is awesome. Thanks so much for putting this together.

Does it support the srcset attribute of the img tag? The reason I ask is I'm putting together a WordPress plugin for this library and WP automagically creates a srcset list when you upload an image.

support

Hi Looks fabulous.

Tell me how or what is the long string of characters at the end of the idata attribute ?
Do we just copy that?

Large image loads, small image(very briefly), then large image again

Hi,

Awesome plugin you have hear. Am really loving it. But i have this problem.

When i load the page (force reload without cache), this is what i experience

1. It loads the large image for some few seconds
2. It then shows the tiny image (for a fraction of a second), very fast
3. Then, it finally shows the large image again.

This twitch causes an undesired effect to the users and its not good for my website.

Trying to follow up with network elements on my chrome, i noticed the large image is loaded first before the smaller image, i don't know if am doing something wrong.

My code is structured like so

// Load css stylesheets
...
// Render image
<img 
	class="antimoderate-img img-fluid" 
	src="{{ asset($image->img_path) }}" 
	data-antimoderate-idata="{{ asset($image->thumbnail_img) }}" 
	alt="{{$a_listing->headline}}" 
	title="{{ $a_listing->headline }}" 
	>
...
// Load jquery and other plugins then load antimoderate plugin
// in one of the custom js files, i call the antimoderate plugin like so 
if (AntiModerate !== undefined && $ !== undefined) {
    var antimoderateImgs = document.getElementsByClassName('antimoderate-img');
    for (var i = 0; i < antimoderateImgs.length; i++) {
        var aImg = antimoderateImgs[i];
        AntiModerate.process(aImg, aImg.getAttribute("data-antimoderate-idata"));
    }
}else{
    $().toastmessage('showToast', {
        text:       'Smooth image loading is not loaded/supported by your browser', 
        stayTime:   10000,
        type:       'warning',
    });
}

Support

I installed it thru NPM but the files doesn't match with the master.
so i needed to download a zip to use it.