如何强制网页加载时立即加载所有图片？loading:eager属性无效

Chrome打印带内嵌图片的网页成PDF时，经常碰到部分图片缺失的情况——得滚到网页底部，浏览器才会从服务器把所有图片加载出来。之前试了用user.js加img { loading: "eager" !important; }的CSS样式，根本没用，因为这些图片的延迟加载是靠监听滚动的脚本控制的。下面给几个不用滚动就能强制加载所有图片的办法：

方法1：浏览器控制台直接跑脚本 #

打开目标网页后，按F12调出开发者工具，切换到Console标签，复制粘贴下面这段代码回车：

document.querySelectorAll('img').forEach(img => {
  // 替换各种延迟加载属性为真实src
  if (img.dataset.src) {
    img.src = img.dataset.src;
    delete img.dataset.src;
    img.removeAttribute('loading');
  }
  // 强制触发未加载的图片
  if (!img.complete) {
    img.load();
  }
});

原理很简单：大部分延迟加载脚本会把真实图片地址藏在data-src这类属性里，滚到可视范围才替换成src。这段代码直接把这些属性的值赋值给src，还会移除延迟加载的标记，逼着浏览器立刻加载所有图片。

方法2：调打印预览的设置试试 #

打开打印预览后，点「更多设置」：

• 把布局改成纵向（之前是横向的话）；
• 勾选「背景图形」；
• 缩放设为「默认」或「适合页面」。
  有些网站的图片加载逻辑会因为打印触发的渲染事件提前加载图片，说不定就能解决问题。

方法3：临时禁用JavaScript #

要是上面的办法都不管用，就临时关掉网页的JS：

• 按F12开开发者工具，按Ctrl+Shift+P（Windows）/Cmd+Shift+P（Mac）调出命令菜单，输入「Disable JavaScript」执行；
• 刷新网页，这时候延迟加载的脚本失效，所有图片会直接加载，然后再打印就行。打印完记得重新启用JS。

方法4：用用户脚本自动处理（适合经常碰到的人） #

装个Tampermonkey扩展，新建个脚本，把下面的代码粘进去：

// ==UserScript==
// @name         强制加载所有图片
// @match        *://*/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
    window.addEventListener('load', () => {
        document.querySelectorAll('img').forEach(img => {
            // 处理常见的延迟加载属性
            const lazyAttrs = ['data-src', 'data-lazy', 'data-original'];
            lazyAttrs.forEach(attr => {
                if (img.hasAttribute(attr)) {
                    img.src = img.getAttribute(attr);
                    img.removeAttribute(attr);
                }
            });
            img.removeAttribute('loading');
            if (!img.complete) img.load();
        });
    });
})();

这个脚本会在所有网页加载完成后自动处理图片，替换各种延迟加载属性，强制加载所有图片，以后再碰到这类问题就不用手动操作了。

内容的提问来源于stack exchange，提问作者thoste