Change src of image before request has been sent

Question

I did a lot of research about this problem, but with no success. Essentially what I want to do is this:
1) Replace the src- attribute of all images with a placeholder, like 'blank.gif'
2) Add the HTML5 data-original attribute with the original image location
3) Lazyload the images (it needs the data-original attribute to work properly)

What I tried without success:
1) attaching this eventlistener document.addEventListener('beforeload', doBeforeLoad, true);
with this function

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) on document.ready sure it won't work..

I have no idea if this is even possible, so any help | suggestion | resource would be greatly appreciated
PS: for example I want to make it work here) (because it's a image-heavy article )

Answer 1

The browser will start making the requests before you can start executing your JS. I recommend you alter the source html to be in the data pattern you require for lazy loading the images. This needs to happen before the browser receives it. This shouldn't be too much trouble if it's server generated.