whackashoe / antimoderate Goto Github PK
View Code? Open in Web Editor NEWThe progressive image loading library for great good!
The progressive image loading library for great good!
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.
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
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 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?
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.
Which browsers are supported?
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?
I am planning to use it on a component in react, is this okay? Or will it behave unnaturally?
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!
Can I add bower integration, so users able to install this library using bower
.
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"));
});
}
I installed it thru NPM but the files doesn't match with the master.
so i needed to download a zip to use it.
I'm guessing var img
should be var picture
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.