jquery: why can't I fade image on Chrome when the image is loaded?_问答_开发者

jquery: why can't I fade image on Chrome when the image is loaded?

开发者 https://www.devze.com 2023-03-05 23:40 出处：网络

I don\'t understand this - why can\'t I fade image on Chrome when the image is loaded? the jquery: $(document).ready(function(){

I don't understand this - why can't I fade image on Chrome when the image is loaded?

the jquery:

$(document).ready(function(){


        $('.image').fadeOut('slow',function(){

        });

    });

the html,

<body>
<img src="pic-1.jpg" class="image"/>
</body>

But it works fine on all other browers, including IE!

Any idea what I have done wrong?

Thanks.

EDIT:

This is the entire code I am testing it on Chrome and other browsers,

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Test</title>
    <script type="text/javascript" src="jquery-1.6.min.js"></script>

    <script type="text/javascript">

    $(document).ready(function(){
        $('img')开发者_如何学运维.fadeOut('slow');
    });

</script>
</head>

<body>
        <img src="pic-1.jpg"/>

</body>
</html>

I think I read it somewhere before that it is to do with how the image is loaded on Chrome. But I can't remember how it works now!

Any idea?

Thanks.

EDIT:

Got it fix like this,

$(document).ready(function(){

        $(window).bind('load', function() {
            $('img').fadeOut('slow');
        });
    });

It might be because $(document).ready() fires when the html is done loading, not after images are done loading. Weird fix, but try wrapping a div around the image and fading that out on ready instead. Alternately, call $('img').fadeOut('slow'); on .load() instead of .ready().