Como impedir que o chrome / firefox faça o download de um gif?

Question

Quando visito qualquer página que contenha alguns gif s animados (Google+, 9gag etc), todos parecem começar a carregar. Minha largura de banda é limitada e não quero que eles sejam baixados, a menos que eu realmente queira ver. Eu vi alguns plugins que apenas param animação mas a imagem em si é baixada de qualquer maneira. O 9gag.com tinha inicialmente esse recurso que apenas mostrava uma imagem estática (se é um gif animado) e começava a ser baixado somente depois que eu clicava nele (eles foram removidos agora).

Então, existe algum plugin que possa parar o download gif? Ou preciso escrever uma extensão? Alguma sugestão?

    

Answer 1

Ainda não tenho nenhuma extensão / plug-in adequado. Eu tentei usar o seguinte script de usuário com TamperMonkey no Chrome. Está funcionando muito bem. Bloqueando todos os gifs (incluindo gifs de ajax) no site 9gag.com. Por alguma razão, gifs de ajax no google + não são bloqueados (investigando isso). Muito obrigado a Synetec por sua ajuda, esforço e código. Aqui está o script do usuário (a maioria dos scripts é copiada de userscript da Synetec):

// ==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);

Agora:

1. Instalar o TamperMonkey
2. Ir para o painel
3. Clique em "novo script"
4. Cole o código acima
5. Salve e veja se funciona. (funciona apenas no 9gag.com agora. Mas você pode alterar a diretiva @match para corresponder a qualquer site desejado. use @match http://*/* para trabalhar em todos os sites (http). Altere para https para qualquer site http protegido, por exemplo google +)

Answer 2

Alguns addons do Firefox:

adblock - bloqueio inteligente de anúncios

flashblock - todo o flash será bloqueado até você não clicar neles

imgblock - bloqueia TODAS as imagens, em qualquer lugar (pode ser com um clique temporariamente desativado)

ghostery - bloqueia os sites de redes sociais (eles podem ganhar mais cem kbytes por visita à página!)