如何强制在加载时立即加载网页上的所有图像（“渴望”不起作用）？

Question

我偶尔会访问带有嵌入图像的网页。 现在我想打印它（变成pdf文件）。 不幸的是，它没有打印所有包含的图像。 我首先要向下滚动到网页底部，告诉浏览器逐步从服务器请求所有图像并将其填充到图像位置。

我考虑编写一个 user.js 脚本，并在里面放入一些 javascript/jquery/css 命令，以在网页加载后强制立即加载。

但我的第一个想法只是添加 CSS 属性

img { loading: "eager" !important; }

不起作用。看来延迟加载不是因为延迟加载而是由脚本决定的。该脚本监视用户是否向下滚动网页。

嗯，有什么建议强制立即加载而不滚动？

您需要示例网页吗？ 这是一个：

https://www.wintips.org/how-to-disable-device-encryption-in-windows-11/

显然我无法访问服务器，而只是 Chrome 浏览器客户端上的用户。

Answer 1

您有一个脚本，它监听滚动事件，一旦发生（用户“向下”滚动得足够多），就会触发一个函数，为了这个答案，我们称这个函数为

f

。

所以它可能看起来像这样：

document.addEventListener("scroll", function (event) {
    var lastDiv = document.querySelector("#scroll-content > div:last-child");
    var lastDivOffset = lastDiv.offsetTop + lastDiv.clientHeight;
    var pageOffset = window.pageYOffset + window.innerHeight;

    if(pageOffset > lastDivOffset - 20) {    
        f();
    }
});

和

f

是向服务器发送请求，一旦收到答案，就将一些HTML写入容器中。

但是，请求不是即时的，您希望改进用户体验。因此，您可以执行以下操作：

let cached = undefined;
function f() {
    if (cached) {
        //If we have some preloaded data, then we write it into the container, so it will appear to work instantly
        writeCached(cached);
    }
    load(); //this sends a request to the server and when it is being responded, writes it to cached
}

因此，基本上每当您向下滚动时，您都会将预加载的项目写入容器并加载下一个块，因此当用户向下滚动时，下一个块将准备就绪，依此类推。

但是，这意味着您始终依赖于预加载的项目，因此，您需要在页面加载时触发

f

，因此在第一次滚动时您也会准备好一些东西，通过：

window.addEventListener("load", f);