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?

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 :)

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.

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',
    });
}

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!

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"));
                    });
                }

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.