whackashoe / antimoderate Goto Github PK

View Code? Open in Web Editor NEW

1.5K 1.5K 115.0 517 KB

The progressive image loading library for great good!

JavaScript 100.00%

antimoderate's People

Contributors

Stargazers

Watchers

Forkers

dylandechant nikhilkarmokar pdw-studio lonid ashfanahamed yomigits slimbn truesibo pandroid steffthom iweig a973c umarmughal kathcue loganfreeman jqueryalmeida radovanx sparkinzy flysoso macsen110 puhrome yashilanka jayvi maxdlx iced-tea chrisemoulton eddhurst arjunmenon sunfun coolguywbp onarf andy737 narendrasinghrathore nilpo naumenkosergiy landsurveyorsunited azorgh quinntynebrown elibawa datachand thomassander dduvanpantoja badk0met thinhlam marcianobarros20 elvis-kture vicedo19 zruibin bukalov amoludage journey-ad prp632791853 snoopy1412 loki315zx xinliul chinbucher liukaijv xianxingzhe resfront rajuyohannan dohoit2016 tvad911 tranphuoctien hanguyenst kamalendugarai zen-li femis caramann ramsesgz twogrey javacspring trungpv93 andrewdblessed neil-orzzh aminembarki razzy7 60thsec hamoodij igrokx70 dzeroone feedlike jamimes iitjee newbie78 wepoem sisihuisi angelscabrerag genjiluo wwhgtt railken maruilian11 zardizumi hu1juan ykankaya tcxiaoming pley echo-lu antrepo ihuangxinyu tecte

antimoderate's Issues

Add bower integration

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

Is this just for <img/>?

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

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.

Errors in example

I'm guessing var img should be var picture

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!

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

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

It loads the large image for some few seconds
It then shows the tiny image (for a fraction of a second), very fast
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',
    });
}

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