8

When I visit any page containing some animated gifs (Google+, 9gag etc), all those seem to start loading. My bandwidth is limited and I don't want those to be downloaded unless I really want to view. I have seen some plugins which just stop animation but the image itself is downloaded anyway. 9gag.com had initially this feature which just showed a static image (if it is an animated gif) and started downloading only after I clicked on it (they have removed it now).

So, is there any plugin which can stop downloading gif? Or, do I need to write an extension? Any suggestion?

7
  • I assume you don’t want to block all images right? The problem with this is that it would be simple enough to block all .gif files, but if you want to block only animated .gif files, then the extension would still have to download any .gif files embedded in the page to determine if they are animated or not. Your best bet is to block all GIFs. (I just thought of an idea that might work well, but I don’t think it has been done. If I get some time, I’ll try to whip up something in case nobody knows of an existing solution.) – Synetech Dec 1 '13 at 3:26
  • Blocking all gif will do. All other images should be visible. I googled, but it seems everybody is concerned about the distraction of animation. So, most of the plugins just stop the animation. I could write a chrome extension; but I was just wondering if any other solution exists. – mshsayem Dec 1 '13 at 3:30
  • 1
    Since animated GIFs are often several megabytes, I agree that they can be quite a nuisance, especially when there’re several in a page (you could practically create a DoS with a page loaded with giant animated GIFs). The few image-blocking extensions I can find tend to be the block-all-images kind. There is however Safe Blocker which has an optional GIF-blocking function. I can’t test it at the moment, but it looks promising. – Synetech Dec 1 '13 at 3:43
  • Just tried Safe Blocker. It just gives you a proxy site which is definitely not what I want. – mshsayem Dec 1 '13 at 4:01
  • Ah, shame. They didn’t mention that, but it would explain the review saying it’s slow. It’s strange that this hasn’t been solved already. Perhaps it’s because pages full of animated GIFs are still fairly new, so it hasn’t been addressed yet. Try this userscript. It didn’t work in an old version of Chromium, but it may work in newer versions of Chrome. – Synetech Dec 1 '13 at 4:14
1

I have not got any suitable extension/plugin yet. I have tried using the following user-script with TamperMonkey in Chrome. It is working great. Blocking all gifs (including ajax gifs) in site 9gag.com. For some reason, ajax gifs in google+ dont get blocked (investigating that). Many thanks to Synetec for his help, effort and code. Here is the user-script (most of the scripts are copied from Synetec's userscript):

// ==UserScript==
// @name       gifBlock
// @namespace  http://i.have.no.homepage/
// @version    0.1
// @description  Stops downloading gif images (including ajax gifs) in 9gag.com (or any page if you just fix the @match rule)
// @match      http://*.9gag.com
// @copyright  2012+, Nobody
// ==/UserScript==

function tamperMonkeyWrap()
{   
    function log(m)
    {
        console.log(m);
    }
    function jQWrap($)
    {
        log("Extension execution begins...");

        function blockGifs()
        {        
            $('img').each(function() {
                var $img = $(this),
                    src = $img.attr('src'),
                    w = $img.width(),
                    h = $img.height(),
                    cursor = $img.css('cursor'),
                    parts = src.split('.'),
                    ext = parts[parts.length-1];

                if ($.trim(ext.toLowerCase()) != "gif")
                    return;            

                $img.attr('data-imgurl', src);
                $img.data('cursor', cursor);
                $img.css('cursor', 'pointer');
                $img.addClass('gif-blocked');                
                h = h > 100? h : 100;
                $img.attr('src', '//ipsumimage.appspot.com/'+w+'x'+h+'?l=Gif (Click)');
            }); 
        }

        function interceptAjax () {
            $('body').ajaxComplete(
                function (event, requestData)
                {
                    log("Blocking GIF [Ajax] ...");                
                    blockGifs();
                }
            );
        }

        $(document).ready(function() {
            log("Blocking GIF [Ready]....");
            blockGifs();
            interceptAjax();        
            $(document).on('click', 'img.gif-blocked', function(ev) {            
                var $img = $(this),
                    url = $img.attr('data-imgurl'),
                    cursor = $img.data('cursor');

                $img.attr('src', url);
                $img.css('cursor', cursor);
                $img.removeClass('gif-blocked');
                ev.preventDefault();
                return false;
            });  
        });

        log("Document is not ready yet. trying block just in case it takes time to be _ready_ (google+).");
        blockGifs();
    }

    if (window.jQuery == undefined)
    {
        log("Loading jQuery...");
        var scriptTag = document.createElement('script');
        scriptTag.src = "//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js";
        scriptTag.onload = function(){
            log("jQuery loaded.");
            window.jQuery = jQuery; 
            jQWrap(jQuery);
        };
        document.getElementsByTagName('head')[0].appendChild(scriptTag);
    }
    else
    {
        log("jQuery already included in the page");
        jQWrap(window.jQuery);
    }   
}

var scriptTag = document.createElement('script');
scriptTag.text = '(' + tamperMonkeyWrap.toString() + ')();';
document.getElementsByTagName('head')[0].appendChild(scriptTag);

Now:

  1. Install TamperMonkey
  2. Go to dashboard
  3. Click on 'new script'
  4. Paste the above code
  5. Save and see if it works. (works only on 9gag.com now. But you can change the @match directive to match any site you want. use @match http://*/* to work for all sites (http). Change to https for any secured http site, e.g. google+)
1
  • To bad that quite a few users have started to upload GIFs with .jpg extension. So called animated JPEGs. Presumably this idiocy stated because some sites would not allow uploading GIFs but checked only the extension to determine the file type. Same way you do it. My guess is that if ($.trim(ext.toLowerCase()) != "gif") will catch only half the GIFs. – Martin Aug 21 '14 at 6:50
0

Some nice firefox addons:

adblock - intelligent blocking of ads

flashblock - all flash will be blocked until you doesn't click them

imgblock - blocks ALL images, everywhere (can be with a click temporarily disabled)

ghostery - blocks the social networking sites (they can make more hundred kbyte per page visit!)

1
  • I know about these. But those dont do what I want. i.e. stop downloading (not just make it invisible) just gif images. – mshsayem Dec 1 '13 at 10:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.