Google-chrome – How to stop chrome/firefox downloading a gif

animated gifbrowser-addonsfirefox-extensionsgoogle-chrome-extensions

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?

Best Answer

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+)
Related Question