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

That technique was used in older browsers with luck, but now modern browsers are not longer cheated with this way, so you have to do blank src and data source attribute on server side, here is popular jQuery lazy load plugin homepage, http://www.appelsiini.net/projects/lazyload you bet they did a lot of researches before writing this

Latest version of Lazy Load is not a drop in replacement to your webpage. New browsers load image even if you remove the src attribute with JavaScript. Now you must alter your html code. Put placeholder image into src attribute of your img tag. Real image url should be stored data-original attribute.

UPD: just think over a bit and probably better approach to data- attribute would be using noscirpt wrapping for images you do want loaded lazlily here roughly illustration for idea http://jsbin.com/uqomeb/2/edit I would possibly do simple jQuery plugin later based on this

Answer 2

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.

Answer 3

It sounds like you're looking to do what amounts to adding an img and yet you're approaching it through the idea of modifying an image. If you use a placeholder span or something similar then you can avoid the whole question and have less variables to consider. Create a span with the dataset for the information that you want, and optionally a class which attaches a background image to indicate that the image hasn't been loaded, and then on page load find the appropriate spans insert the img element (or replace the span if preferred), and do any other cleanup such as removing the "loading" style class. This could allow for structuring your page in a way that is less likely to ever be in an inconsistent state.