Geek asks and answers

What event to load the image?

I know jQuery.load()it starts when it has <img>finished loading.

I would like to know which event will be fired when the browser starts loading the image. Usually at the first moment the browser knows the size of the image, and then it takes some time (depending on the size of the image) to load the image.

I would like to attach an event to find out the size of the image as soon as the browser finds out about it, or as soon as the browser starts to load it.

[EDIT]

Thanks for the idea from @ jfriend00, now I use setIntervalto check the size. BUT not the size of the picture, some browser just won’t say it before you finish the download. Therefore, I check the size of the container. Once the image size is known to the browser, it will adjust the size of the container. Vala done.

+5
source share
2 answers

The browser does NOT provide a special event that will inform you as soon as possible that it knows the size of the image (before it finishes downloading the image). All you can do is set up an appropriate load handler to find out when the image has finished loading, and then its size is known.

, , .width .height. this jsFiddle Chrome onload(). .

onload .src HTML- , , , , - :

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

javascript ( , ). (, , ).

( , javascript), .

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

: onload, .src. IE, , , .src , , .src, onload, onload .

+5

onStartLoad . . "load", .

.

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

, onDomReady, - " ". :

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'));
    });
});
-1

More articles:


All Articles