Załaduj wszystkie obrazy, nawet jeśli strona nie jest przewijana do lokalizacji obrazu

Niektóre witryny nie ładują obrazów, dopóki użytkownik nie przewinie do lokalizacji obrazu. Na przykład patrz Banggood . Załaduj stronę, a gdy strona zostanie zakończona, przewiń w dół. Zauważysz, że obrazy są ładowane tylko wtedy, gdy lokalizacja obrazu jest przewijana do. Ze względu na opóźnienie ładowania sprawia, że ​​przeglądanie strony jest dość denerwujące.

Jak mogę skonfigurować Firefoksa, aby ładował wszystkie obrazy, nawet przed przewinięciem do każdej lokalizacji strony? Wolę skonfigurować Firefoksa bez dodatku, jeśli to możliwe, nawet jeśli oznacza to manipulowanie about:config.

Zauważ, że ten problem nie jest specyficzny dla strony, do której prowadzi powyższy link, znajduję go na coraz większej liczbie stron internetowych w miarę przeprojektowywania. Dlatego każde rozwiązanie powinno być rozwiązaniem ogólnym, które nie zależy od adresu URL strony ani domeny.

Mam skrypt użytkownika, który dokładnie to robi. Wykrywa atrybuty znaczników img, które prawdopodobnie zawierają prawdziwy adres URL obrazu i zmienia atrybut src na ten. Napisałem to, aby strony z leniwym ładowaniem obrazów mogły być używane bez uruchamiania ich 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();
}

Oczywiście wymagany jest Greasemonkey lub podobny. Nie wierzę, że można to zrobić bez takiego dodatku. The Washington Post to jedyna strona, z którą zetknąłem się do tej pory, gdzie powoduje to problemy. Jako taki jest wykluczony.

Efekt ten jest często pożądany i tworzony przez wolę twórców strony z JavaScript. Przyspiesza to pobieranie / wyświetlanie stron. Na przykład Twitter lub Google+ usuwają niektóre osadzone treści, takie jak filmy z modelu obiektów dokumentu (DOM), gdy przewijają się one poza port.

Wątpię, aby nie było możliwości zmiany tego zachowania w konfiguracji przeglądarki. Możesz dezaktywować JavaScript, ale może to doprowadzić do stanu, w którym obrazy nigdy nie zostaną załadowane.

Nie znam też sztuczki, która uruchamia zdarzenia JavaScript, które rozpoczynają ładowanie obrazu. W każdym razie istnieją różne techniki, aby osiągnąć opisane zachowanie, jak możesz to przeczytać Pytanie StackOverflow . Więc prawdopodobnie nie będzie rozwiązania, które będzie działać na każdej stronie.