☰

加载所有图像，即使页面未滚动到图像位置

tag-icon • tag-icon firefox images scrolling
加载所有图像，即使页面未滚动到图像位置

有些网站直到用户滚动到图片位置时才会加载图片。例如，参见邦古德。加载页面，页面加载完成后向下滚动。您会注意到，只有滚动到图像位置时才会加载图像。由于加载延迟，浏览页面时会非常烦人。

如何配置 Firefox 使其在滚动到每个页面位置之前加载所有图像？如果可能的话，我宁愿配置没有插件的 Firefox，即使这意味着摆弄about:config。

请注意，这个问题并非上述链接网站所特有，我发现越来越多的网站在重新设计时都存在这个问题。因此，任何解决方案都应该是通用解决方案，不依赖于页面 URL 或域名。

答案1

我有一个用户脚本可以完成这个任务。它会检测 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 或类似程序。我认为没有这样的插件就无法做到这一点。到目前为止，《华盛顿邮报》是我遇到的唯一一个出现此问题的网站。因此，它被排除在外。

答案2

这种效果通常是网站创建者希望使用 JavaScript 实现的。这可以加快页面的下载/显示速度。例如，Twitter 或 Google+ 还会在视频滚动出视口时从文档对象模型 (DOM) 中删除一些嵌入内容（如视频）。

我怀疑没有办法通过浏览器配置来改变这种行为。您可以停用 JavaScript，但这可能会导致图像永远无法加载的状态。

我也不知道触发 JavaScript 事件来开始加载图像的技巧。无论如何，有多种技术可以实现所描述的行为，如您在本文中所读到的StackOverflow 问题。因此可能不存在一个适用于每个页面的解决方案。

相关内容