Carrega todas as imagens, mesmo que a página não esteja rolada para o local da imagem

Question

Alguns sites não carregam imagens até que o usuário vá até o local da imagem. Por exemplo, veja Banggood Carregue a página e, quando a página terminar, role para baixo. Você notará que as imagens são carregadas somente quando o local da imagem é rolado para. Devido à latência da carga, torna a navegação na página bastante irritante.

Como posso configurar o Firefox para carregar todas as imagens, mesmo antes de navegar para cada local da página? Eu prefiro configurar o Firefox sem um addon, se possível, mesmo que isso signifique mexer com about:config .

Observe que esse problema não é específico para o site vinculado acima, mas sim em mais e mais sites quando eles são reformulados. Portanto, qualquer solução deve ser uma solução geral, que não depende do URL ou domínio da página.

    

Answer 1

Eu tenho um userscript que faz exatamente isso. Ele detecta atributos em tags img que provavelmente contêm o URL da imagem real e altera o atributo src para isso. Escrevi para que os sites com imagens de carregamento lento possam ser usados sem executar o javascript.

// ==UserScript==
// @name     fix-lazy-load-images
// @version  2
// @grant    none
// @exclude  /^https?://(?:(?:[^\W_]|-)+\.)?washingtonpost\.com(/.*|$)/
// ==/UserScript==

// example site: https://www.howtogeek.com/167533/the-ultimate-guide-to-changing-your-dns-server/

function doit(){
    var lazy_image_keywords = ['data', 'pagespeed', 'lazy', 'src'];


    var fix_lazy_load_element = function(element, src_attribute, keywords) {
        var last_valid = "";
        for (var attribute of element.attributes) {
            var number_of_keywords = 0;
            for (var keyword of keywords) {
                if (attribute.name.includes(keyword) ){
                    number_of_keywords += 1;
                    if (number_of_keywords >= 2) {break};
                }
            }

            if (number_of_keywords >= 2) {
                last_valid = attribute;
            }
        }
        if (last_valid !== "") {
                element.setAttribute(src_attribute, last_valid.value);
        }
    }

    for (var element of document.querySelectorAll('img')) {
        fix_lazy_load_element(element, "src", lazy_image_keywords);
    }

    // now fix all the <source> tags in <picture> tag...
    for (var picture_element of document.querySelectorAll('picture')) {
        for (var source_element of picture_element.querySelectorAll("source")) {
            fix_lazy_load_element(source_element, "srcset", lazy_image_keywords);  
        }

    }
}

if(document.readyState === "loading"){
    window.addEventListener('load', doit);
} else {
    doit();
}

Greasemonkey ou similar é obrigatório, é claro. Eu não acredito que haja uma maneira de fazer isso sem esse addon. O Washington Post é o único site que encontrei até agora, onde isso causa problemas. Como tal, é excluído.

    

Answer 2

Este efeito é frequentemente desejado e produzido por vontade dos criadores do site com JavaScript. Isso acelera o download / exibição das páginas. O Twitter ou o Google+, por exemplo, também remove alguns conteúdos incorporados, como vídeos, do modelo de objeto de documento (DOM) quando eles rolam para fora da porta de visualização.

Eu duvido que não haverá como alterar esse comportamento com uma configuração do navegador. Você pode desativar o JavaScript, mas isso pode levar a um estado em que as imagens nunca serão carregadas.

Eu também não conheço um truque para acionar os eventos JavaScript que iniciam o carregamento da imagem. De qualquer forma, existem diferentes técnicas para alcançar o comportamento descrito, como você pode ler neste pergunta StackOverflow . Portanto, provavelmente não existirá uma solução que funcione em todas as páginas.