12

I'd like to change the src attribute of images before they are requested by the browser, the aim being to reduce the size of the images using a PHP script like Timthumb. Using jQuery, I thought $(document).ready would do the trick:

$(document).ready(function () {
  var imgs = $('#container img');
  jQuery.each(imgs, function() {
    $(this).replaceWith('<img src="timthumb/timthumb.php?src=' + $(this).attr('src') + '&w=200" />');
    });
});

But the original, unresized image is still downloaded in the background to the browser's cache. Is it possible to do what I'm trying to do on the client side, or is server-side the only option?

1
  • 3
    Why don't you just change the src in the script that generates them instead?
    – Scott A
    Nov 8, 2011 at 23:55

3 Answers 3

16

Javascript loading and execution is serialized by the browser (unless you use something like head.js), but the problem is that the DOM has to be available for a script to modify it. The jQuery ready event fires after the DOM is available, so the browser has already started requesting the resources that were referenced in the HTML.

So if you put the Javascript before the image tag it won't be able to find the image tags, and once ready fires the download has already started. I'm not aware of any events that fire before image load (just one for aborts), so the cleanest method is to create the HTML with the modified src attributes in the first place.

Alternatively, put the src in a different attribute on the image (like data_orig_src) and run the script to set src to data_orig_src on each image upon document ready. Use CSS to hide the images before changing the src so the user doesn't see a broken image icon. I think this is probably better than adding the images after the fact because you won't need to track where the images need to be placed in the DOM, and it should perform better as well.

Of course if you can change the server to use data_orig_src instead of src, why not just put the proper src in the tag in the first place...

4
  • Okay, so it sounds like server-side is the only way to go. Thanks.
    – Toutouwai
    Nov 9, 2011 at 0:11
  • The only reason I could see for doing what you were asking to do is if you didn't have access to the server code, or modifying it was extremely painful for whatever reason.
    – Scott A
    Nov 9, 2011 at 0:31
  • 1
    A valid use case example would be implementing background image lazy loading in something like Webflow.
    – Tails
    Nov 27, 2019 at 11:59
  • Note that this answer is over 8 years old and the world has moved on since then. :-) We currently use lazysizes (github.com/aFarkas/lazysizes) for lazy image loading.
    – Scott A
    Nov 27, 2019 at 15:06
8

You cannot change the DOM of the page before the DOM has been loaded. And, once the DOM has been loaded, the browser has already started requesting images. So, you cannot change <img> tags before they start loading their images.

What you could do is change the source of the page to not have any of the images you want to change in the source of the page and then use javascript to dynamically insert the desired images after the page has been loaded. This way the browser will never request the wrong images.

Or, you could change the <img> tags to not have a .src property at all and with your Javascript you would add the .src property. An <img> tag with no .src property will not display until you provide it with a .src property.

If you're worried about the wrong images flashing as they are loaded before you change them to the correct images, you can use CSS in a stylesheet to hide the images initially and then after you change the img.src to the correct value and that new .src value has loaded, you can make them visible.

If you can't change the source of the page, then all you can do is hide the images initially (using CSS) until the correct .src has been set on them and that new .src value has been loaded.

4
  • Just a note on hiding the images, then changing the img.src after the fact, one problem you might run into is the old image will show briefly while the newer image loads, so you get a bit of a "flash" effect. Nov 9, 2011 at 2:14
  • The whole point of hiding the images initially is that the old image won't show.
    – jfriend00
    Nov 9, 2011 at 2:25
  • Exactly, but if you use css to hide, jquery change the attribute, then show the image, it will flash the old image while the new image loads. Nov 9, 2011 at 2:31
  • 2
    @HighwayofLife - I tested Safari, IE9 and Chrome and do not see a flash. Firefox does flash (how bogus). You can show() when the new image is loaded if you want to prevent the flash in Firefox. Here's a demo of that: jsfiddle.net/jfriend00/fgK9q.
    – jfriend00
    Nov 9, 2011 at 3:15
0

It is sort of possible but not in the way you currently have or probably want and it doesn't degrade gracefully but you can take the image out of your html and use jQuery to insert it into your html and apply whatever changes you want to it.

Example:

var image = $('<img />').attr('src', 'imageURL.jpg');
image.appendTo('domElement');

But doing it like this it doesn't make any sense to me as to why you wouldn't just edit the image source anyway.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.