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

Question

我对这个问题做了很多研究，但没有成功。基本上我想做的是:
1) 用占位符替换所有图像的 src- 属性，例如 'blank.gif'
2) 添加带有原始图片位置的HTML5 data-original 属性
3) Lazyload图像(它需要数据原始属性才能正常工作)

我没有成功的尝试:
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 上确定它不会工作..

我不知道如果这是可能的，所以任何帮助 |建议 |资源将不胜感激
PS:例如我想让它工作here )(因为这是一篇图片较多的文章)

Answer 1

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