Expected behavior happening in reverse. #12

paxperscientiam · 2016-04-19T23:29:00Z

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

The text was updated successfully, but these errors were encountered:

whackashoe · 2016-04-19T23:51:47Z

Everything looks fine here, as far as I can tell. I just tried this code in the demo directory:

<!doctype html>
<html>
    <body>                                                                                                                    
        <img src="2.jpg" class="center-light thumbnail" style="width:200; 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>

        <script src="../antimoderate.js"></script>
        <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
        <script>
             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"));
                });
            }
        </script>
    </body>
</html>

So not super sure what the issue is. Can you try that and see if it works for you?

paxperscientiam · 2016-04-20T20:03:47Z

Hi @whackashoe

Thanks for the response. Curiously, I am getting no substitution at all now. I reviewed network activity and it only shows the large pic being loaded, though maybe that's just a firefox thing. When I replaced the base64 string with a direct link, it did load. However, the desired effect still did not occur.

On my local server, I created a new file 'test.html' and stuck your code in verbatim. I even made sure to declare encoding (UTF-8).

Console does indicate that the Jquery function is being executed though.

If my understanding is correct, Antimoderate is supposed to substitute the tiny pic in and seamlessly replace it with the large pic as it loads -- is that accurate?

whackashoe · 2016-04-20T20:35:21Z

So what happens during the normal demo.html? Does it look like ?

Yeah so if the main image is already in your cache you might get a flicker of the small version, or maybe not at all depending on how quickly the onload event fires.

Is this bit added:

         <style>
         img.antimoderate {
             display:inline-block;
         }        
         </style>

? I forgot to include that in my snippet above. Chrome doesn't care but ff does.

whackashoe · 2016-04-21T01:35:26Z

Also, what OS and exact version of FF is this? If all else fails maybe I can try to reproduce, and see if I can debug from there.

paxperscientiam · 2016-04-21T03:48:55Z

I am running OSX 10.11.4. I was using regular FF (latest stable release I believe); however, I'm now using dev edition 47.0a2.

So, I added that bit of styling and flipped the cache on and off a bunch of times. Antimoderate is kinda working now. I switched to using a 5 MB image with a 8kb tiny one. It worked for a bit; however, it doesn't seem to be consistent.

For the most part, the tiny image is loading long after the large image.

Any suggestions? Should I try another browser in particular?

https://www.dropbox.com/s/xm07o9s2h0v8uer/Screenshot%202016-04-20%2023.45.14.png?dl=0

frigginglorious · 2016-04-21T13:46:43Z

I think I was able to reproduce this issue, though not in firefox (developer edition).

I was only able to reproduce when I turn on the network throttling feature to the lowest setting in Chrome (on OS X).

Page doesn't fully load until after 20 seconds, but the antimoderated image on the left will show loading correctly, then by the time the document is done loading, it becomes the image you see above. It's an 89 KB jpg.

Full page code below.


<!doctype html>
<html>
<head>
     <style>
     img.antimoderate {
         display:inline-block;
     }        
     </style>
</head>
    <body>                                                                                                                    
        <img src="2.jpg" id="blury" class="center-light thumbnail" style="width:200; 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>

        <img src="2.jpg" class="center-light thumbnail" style="width:200; height:200px;"/>
        <h1>BLUR VS NORMAL</h1>

        <script src="antimoderate.js"></script>
        <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
        <script>
             if (AntiModerate !== undefined && $ !== undefined) {
                console.log("AntiModerate is ready to blur your images!");

                $("#blury").each(function(index, obj) {
                    console.log("runnin blur");
                    AntiModerate.process(obj, obj.getAttribute("data-antimoderate-idata"));
                });
            }
        </script>
    </body>
</html>

frigginglorious · 2016-04-21T16:28:23Z

throttled to 750Kbps

whackashoe · 2016-04-21T17:07:30Z

On Linux Google Chrome Version 50.0.2661.75 (64-bit) during throttle there is no issue, it is working correctly.

@frigginglorious thanks for testing

paxperscientiam · 2016-04-22T00:12:28Z

@frigginglorious thanks for your replies. In your recent post, I see you were able to reproduce the error from the OP.

I did try your code from your first post, but the issue remains. Actually, when I use the encoded image as source, I see no network activity indicating that it was parsed. Even with a link to a regular jpg, the tiny pics do not show.

@whackashoe

I just tried with Chrome 47 on OSX and Antimoderate does work. Once I turned on throttling, the mechanism was clearly apparent.

whackashoe · 2016-04-22T01:01:27Z

Ok I've added this to bountysource since I don't have access to an osx machine for further testing.

whackashoe added the hacktoberfest label Oct 16, 2016

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Expected behavior happening in reverse. #12

Expected behavior happening in reverse. #12

paxperscientiam commented Apr 19, 2016 •

edited

Loading

whackashoe commented Apr 19, 2016

paxperscientiam commented Apr 20, 2016

whackashoe commented Apr 20, 2016

whackashoe commented Apr 21, 2016

paxperscientiam commented Apr 21, 2016

frigginglorious commented Apr 21, 2016 •

edited

Loading

frigginglorious commented Apr 21, 2016 •

edited

Loading

whackashoe commented Apr 21, 2016 •

edited

Loading

paxperscientiam commented Apr 22, 2016

whackashoe commented Apr 22, 2016

Expected behavior happening in reverse. #12

Expected behavior happening in reverse. #12

Comments

paxperscientiam commented Apr 19, 2016 • edited Loading

whackashoe commented Apr 19, 2016

paxperscientiam commented Apr 20, 2016

whackashoe commented Apr 20, 2016

whackashoe commented Apr 21, 2016

paxperscientiam commented Apr 21, 2016

frigginglorious commented Apr 21, 2016 • edited Loading

frigginglorious commented Apr 21, 2016 • edited Loading

whackashoe commented Apr 21, 2016 • edited Loading

paxperscientiam commented Apr 22, 2016

whackashoe commented Apr 22, 2016

paxperscientiam commented Apr 19, 2016 •

edited

Loading

frigginglorious commented Apr 21, 2016 •

edited

Loading

frigginglorious commented Apr 21, 2016 •

edited

Loading

whackashoe commented Apr 21, 2016 •

edited

Loading