javascript - Change src of image before request has been sent - Stack Overflow

admin管理员组

文章数量:1327674

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 )

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 )

• javascript
• jquery
• browser
• request
• onbeforeload

Share Improve this question Follow edited Jan 20, 2013 at 17:38 Paul Fleming 24.5k88 gold badges7878 silver badges113113 bronze badges asked Jan 19, 2013 at 13:51 christian_feichristian_fei 10333 silver badges1010 bronze badges 2

• 1 too late to stop requests using javascript if img tags already in html. Parse them with server code to do the same before html is sent – charlietfl Commented Jan 19, 2013 at 13:54
• Ok, thanks, thought jquery could manage this.. – christian_fei Commented Jan 19, 2013 at 14:18

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

The browser will start making the requests before you can start executing your JS. I remend 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.

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.

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/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./uqomeb/2/edit I would possibly do simple jQuery plugin later based on this

本文标签： javascriptChange src of image before request has been sentStack Overflow