Load all images, even if page isn't scrolled to image location

Question

Some websites do not load images until the user scrolls to the location of the image. For example, see Banggood. Load the page, and when the page is done loading scroll down. You will notice that images are loaded only when the image location is scrolled to. Due to the load latency, it makes browsing the page quite annoying.

How can I configure Firefox to load all the images, even before scrolling to each page location? I would prefer to configure Firefox without an addon if possible, even if it means fiddling with about:config.

Note that this problem is not specific to the website linked above, I find it on more and more websites as they redesign. Therefore, any solution should be a general solution, that does not depend on the page URL or domain.

Answer 1

I have a userscript that does exactly this. It detects attributes on img tags that likely contain the real image url and changes the src attribute to that. I wrote it so sites with lazy loading images can be used without running their 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 or similar is required of course. I don't believe there's a way to do this without such an addon. The Washington Post is the only site I've encountered so far where this causes issues. As such, it is excluded.

Answer 2

This effect is often desired and produced by will of the site creators with JavaScript. This speeds up the download / display of the pages. Twitter or Google+ for example also remove some embedded content like videos from the document object model (DOM) when they scroll out of view port.

I doubt there will be no way to change this behavior with a browser configuration. You could de-activate JavaScript, but this could lead to a state where the images never will be loaded.

I also don't know a trick to trigger the JavaScript events that start the image loading. Anyway there are different technics to achieve the described behavior as you can read in this StackOverflow question. So there probably will not exist a solution, that will work on every page.