ansaurus

Question

How does the browser know if an image is loaded?

Answer 1

A:

You can always check for $('img').length();

Wes 2010-09-27 15:15:19

Do you mean $('img').length; ? I don't need to know how many images there are. I checked docs.jquery.com and I don't see a length() method, is there a length() method I am not seeing or know about that you are referring to?

Jeff 2010-09-27 15:21:43

My Bad, you're right Jeff.

Wes 2010-09-29 04:16:02

Answer 2

A:

Here's a sample code that should work. I did a project that needed this and I remember that some problems might include:

The browser caches the image (IE i believe) so I had to append ?[random] at the end
Maybe you have to set the src javascriptly so that your event is hooked at the right time

Sample code:

<!DOCTYPE html>
<html>
<head>
<title>Sample</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"&gt;&lt;/script&gt;
<script type="text/javascript">
$(function(){       
    $('#imageSample')
        .load(function(){
            alert($('#imageSample').width());
            alert($('#imageSample').height());
        })
       .attr('src', 'http://www.gimp.org/tutorials/Lite_Quickies/quintet_hst_big.jpg?' + new Date());

});
</script>
<style type="text/css"></style>
</head>
<body>
    <img id="imageSample" src="" alt="" />
</body>
</html>

Dan 2010-09-27 15:24:03

The src is being supplied via CMS, so adding it through javascript is going to be a bit of a hassle.

Jeff 2010-09-27 15:34:22

It should work also even if you don't set the src. At least on chrome and ff.

Dan 2010-09-27 15:36:50

Using .load() method I get the same results. The function I am called doesn't wait for the image to fully load.

Jeff 2010-09-27 16:42:33

what browser are you using? here's the doc for load (http://api.jquery.com/load-event/), it should work on chrome and firefox. I didn't test on IE but I think it should work. You can also check the code of lightbox2, it loads the image then waits to get the height and width.

Dan 2010-09-27 19:52:11

Answer 3

A:

Images might be cached, try this: http://github.com/peol/jquery.imgloaded/raw/master/ahpi.imgload.js

vls 2010-09-27 15:26:55

Happens even if I clear my temp internet files/history/cache the whole thing, still gives me the problem.

Jeff 2010-09-27 15:32:33

Answer 4

A:

Use something simple like so:

var loaded =  false;
var len = $('#bgStage img.bg'), c = 0;
$('#bgStage img.bg').each(function(){

    $(this).attr('src',$(this).attr('src') + new Date()); //Remove caching.

    $(this).bind('onload',function(){

        //Other Stuff here!

        if(c == len)
        {
            HomeSlider();
        }
        c++; //Increment
    });
});

Tell me how it goes :)

RobertPitt 2010-09-27 15:27:30

Tried something like this, still fires before the image has completely loaded.

Jeff 2010-09-27 15:32:57

you tried using the `onload` event ? Updated!

RobertPitt 2010-09-27 15:35:02

Yes, tried the onload even and I get the same results.

Jeff 2010-09-27 16:41:38

Answer 5

A:

Each image has a complete property. Unfortunately not all browsers support it. They always report true, even if the image hasn't loaded at all. IE gets it right. ;-)

http://simon.html5.org/test/html/semantics/img/src/ (not mine)

DanMan 2010-09-27 18:52:06

ansaurus

tags:

views:

answers:

How does the browser know if an image is loaded?

related questions