在发送请求之前更改图像的 src

我对这个问题做了很多研究，但没有成功。 本质上我想做的是：
1) 将所有图像的 src- 属性替换为占位符，例如“blank.gif”
2) 添加带有原始图像位置的 HTML5 data-original 属性
3) Lazyload图像（需要 data-original 属性才能正常工作）

我尝试过但没有成功：
1）附加此事件监听器document.addEventListener('beforeload', doBeforeLoad, true);
有了这个功能

function beforeload() {
        var blank = 'image/location/images/blank.gif';
        $('img').each(function() {
            var orig = $(this).attr('src');
            $(this).attr('data-original',orig);
            $(this).attr('src',blank);
            console.log("changing all data on images");
        });
    }

2）在 document.ready 上肯定行不通。

我不知道if这甚至是可能的，所以任何帮助|建议 |资源将不胜感激
PS：例如我想让它发挥作用here）（因为这是一篇图片较多的文章）

在您开始执行 JS 之前，浏览器将开始发出请求。我建议您将源 html 更改为data延迟加载图像所需的模式。这需要在浏览器接收之前发生。如果它是服务器生成的，这应该不会太麻烦。