CODEWITHSUNDEEP
javascriptjquerydocument-ready
Toutouwai
Toutouwai

Reputation: 141

Is it possible to run javascript before images begin loading?

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?

Upvotes: 12

Views: 17866

Answers (3)

Scott A
Scott A

Reputation: 7834

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...

Upvotes: 16

jfriend00
jfriend00

Reputation: 707456

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.

Upvotes: 8

George Reith
George Reith

Reputation: 13476

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.

Upvotes: 0

Related Questions