Загружать все изображения, даже если страница не прокручена до местоположения изображения

Question

Некоторые веб-сайты не загружают изображения, пока пользователь не прокручивает местоположение изображения. Например, см. Banggood. Загрузите страницу, и когда страница будет готова, прокрутите страницу вниз. Вы заметите, что изображения загружаются только тогда, когда местоположение изображения прокручивается до. Из-за задержки загрузки, это делает просмотр страницы довольно раздражающим.

Как я могу настроить Firefox для загрузки всех изображений, даже перед прокруткой на каждую страницу? Я бы предпочел настроить Firefox без надстройки, если это возможно, даже если это означает возиться с about:config .

Обратите внимание, что эта проблема не относится только к веб-сайту, указанному выше, я нахожу его на все большем количестве веб-сайтов по мере их редизайна. Поэтому любое решение должно быть общим решением, которое не зависит от URL страницы или домена.

Answer 1

У меня есть usercript, который делает именно это. Он обнаруживает атрибуты в тегах img, которые, вероятно, содержат реальный URL изображения, и изменяет атрибут src на этот. Я написал это так, чтобы сайты с отложенной загрузкой изображений могли использоваться без запуска их 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 или аналогичный требуется, конечно. Я не верю, что есть способ сделать это без такого дополнения. The Washington Post - единственный сайт, с которым я столкнулся до сих пор, где это вызывает проблемы. Таким образом, это исключено.

Answer 2

Этот эффект часто желателен и создается по воле создателей сайта с помощью JavaScript. Это ускоряет загрузку / отображение страниц. Например, Twitter или Google+ также удаляют некоторые встроенные материалы, такие как видео, из объектной модели документа (DOM), когда они прокручиваются из порта просмотра.

Я сомневаюсь, что не будет никакого способа изменить это поведение с конфигурацией браузера. Вы можете деактивировать JavaScript, но это может привести к состоянию, когда изображения никогда не будут загружаться.

Я также не знаю хитрости, чтобы вызвать события JavaScript, которые запускают загрузку изображения. В любом случае, для достижения описанного поведения существуют разные техники, которые вы можете прочитать в этом вопросе StackOverflow. Так что, вероятно, не будет существовать решение, которое будет работать на каждой странице.