What's the event for an image to start downloading?

Question

I know jQuery.load(), it's fired when an <img> has completed downloading.

I'd like to know what event is fired when the browser starts downloading the image. Normally at the first moment, the browser knows the size of the picture, and then it takes a while (depending on the picture size) for the picture to download.

I'd like to attach an event to know the picture size as soon as browser knows it, or as soon as the browser starts downloading it.

[EDIT]

Thank you for the idea from @jfriend00, now I use setInterval to check the size. BUT not the size of picture, some browser just not tell before finish downloading. So I check the size of container. Once picture size known by browser, it will adjust container size. Wala, done.

possible duplicate of [jQuery callback on image load (even when the image is cached)](http://stackoverflow.com/questions/3877027/jquery-callback-on-image-load-even-when-the-image-is-cached) -- although the browser renders a box when the image starts downloading, JavaScript can't retrieve the dimensions of an image until it's completely downloaded. — Blazemonger, Aug 20 '12 at 21:51
The best I can think of is sending an ajax request with a `Range` header to fetch only the header of the image, then parse the header manually to obtain the dimensions. Not very reliable though, and it depends on the image format. — pimvdb, Aug 20 '12 at 21:57

jfriend00 · Accepted Answer · 2012-08-20T23:56:50.870

The browser does NOT provide a special event that will tell you the earliest possible time that it knows the size for an image (before it has finished downloading the image). All you can do is set up an appropriate load handler to know when the image has finished downloading and then its size is known.

A brute force way that seems to work in some browsers for getting the height and width a little before the full image has loaded is to poll the loading image for the existence of .width and .height. In this jsFiddle in Chrome, it is sometimes available before the onload() event fires. I've not tested this in other browsers.

If you go the route of an onload handler and your image tag with the .src specific is in the HTML of the page, the ONLY way to make sure you get notified when it is loaded is to put an inline image handler so the handler is installed from the very beginning:

<img src="xxx.jpg" onload="handleLoad(this)">

Trying to attach an event handler from your page javascript may be too late (after the image has finished loading). The browser does not provide intermediate event info (like when it knows the size, but hasn't finished downloading the image).

For dynamically created image objects (image objects you create in your javascript), you can attach a listener for the load event when you create the object.

var img = new Image();
img.onload = function() {
    // the image is now loaded here and height and width are known
};
img.src = "xxxx.jpg";

Note: when doing this with dynamically created image objects, you MUST set the onload handler BEFORE you set the .src value. In some versions of IE, if the image is cached, the load event will fire immediately when the .src value is set so if you set .src first and then set the onload handler, you will miss the onload event if the image is in the browser cache.

"dynamically created images" => "dynamically created image nodes"? — Beetroot-Beetroot, Aug 20 '12 at 22:17
@Beetroot-Beetroot - dynamically created image objects is what I meant. I've edited my answer to use this terminology. — jfriend00, Aug 20 '12 at 22:18
Aren't image objects/image nodes the same thing? At least in Chrome they yield me the same thing. — pimvdb, Aug 20 '12 at 22:20
Yes, I know what you meant, but what you wrote was misleading ... and I've just taken negative votes for a better answer!!! — Beetroot-Beetroot, Aug 20 '12 at 22:24
@pimvdb - image objects or image nodes are basically the same thing in this context. I preferred using the term "object" so that's what I used in my answer. — jfriend00, Aug 20 '12 at 23:59

Beetroot-Beetroot · Answer 2 · 2012-08-20T22:22:16.997

-1

An onStartLoad event does not exist I'm afraid. You need to use the 'load' event that you appear already to know about.

There is an unsafe and a safe way to do this.

$(function() {
    $(imgNodeSelector).on('load', function(){
        //do stuff here
    });
});

This is unsafe because some browsers can load cached images before the 'onDomReady' event fires, in which case the load handler is put in place too late - it will have "missed the boat". Therefore, it's safer to do the following:

HTML:

<img class="delayedLoad" src="" data-src="path/to/images/myImg.jpg" />

javascript:

$(function() {
    $("img.delayedLoad").each(function() {
        $img = $(this);
        $img.on('load', function() {
            //do stuff here
        }).attr('src', $img.data('src'));
    });
});

edited Aug 20 '12 at 22:22

answered Aug 20 '12 at 21:48

Beetroot-Beetroot

18,022
3
37
44

Op has that in his question, the first sentence even. – Madbreaks Aug 20 '12 at 21:49
1

That's what he has; he wants another event that is fired sooner (when the dimensions are available rather than when the image is fully downloaded). – pimvdb Aug 20 '12 at 21:49
Fair enough, but not available I'm afriad. This is the best you can do. – Beetroot-Beetroot Aug 20 '12 at 22:04

What's the event for an image to start downloading?

2 Answers2