3

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.

2
  • 1
    My Firefox 39.0 on Ubuntu 15.04 loads all the images on- and off-screen during the initial page load of your link. I have quite a few add-ons installed, and one of these may cause this behaviour, but it would take a long time to investigate which: possible candidates include Image Zoom, Tab Scope and Print Edit. Personally, I would prefer if it worked as it does for you, but each to his or her own.
    – AFH
    Jul 9, 2015 at 11:58
  • @AFH: Thank you for the tips, I will investigate those addons and see what I can come up with.
    – dotancohen
    Jul 9, 2015 at 13:51

2 Answers 2

2

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.

-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.

1
  • 2
    "This speeds up the download / display of the pages." No it gets rid of the loading icon because the page is ready, but it hasn't actually finished loading all images until you scrolled past all of them (and waited for each to load individually). This is saving pennies by overzealous website owners, and not speeding up pages in the interest of users. It's different from when something is scrolled far out of view, like on Twitter as you mention.
    – Luc
    Jul 15, 2017 at 21:24

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .