[Web2.0] jQuery fadeIn onload

Ven 21 Set 2007 14:30:41 CEST

Emiliano Gabrielli (aka AlberT) ha scritto:
> On giovedì 20 settembre 2007, Giovanni Battista Lenoci wrote:
>   
>> Se la sfumatura devi ottenerla senza interazione puoi metterla
>> sull'onload dell'immagine.
>>
>> $('#id_img')[0].load = function () { $('#id_img').fadeIn("slow") };
>>
>> Se invece deve avvenire tramite un'interazione dell'utente devi per
>> forza fare il binding solo al windows.load, cosi sei sicuro che tutte le
>> immagini sono state caricate.
>>     
>
> sartò cretino io .. ma non mi cambia nulla...
>
> se capiti in irc o icq magari :-)
>
>   
Guarda, il metodo più semplice è questo:

<html>
  <head>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript">
    $(window).load(function() {
      $('#test').fadeIn('slow');
    });
    </script>
    <style>
    #test {
      display:none;
    }
    </style>
  </head>
  <body>
    <img id="test" src="images/test.jpg" />
  </body>
</html>

In effetti mettendo l'azione nella funzione onload dell'immagine non 
prendi in considerazione il fatto che l'immagine sia già in cache, e 
quindi in firefox non succede nulla...

Ho fatto una prova e cosi dovrebbe andare:

<html>
  <head>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
    img = $('<img>');
    img.attr({'src':'images/test.jpg', 'id', 'test'});
    img.css({'display':'none'});
    img.appendTo($('body'));
    if(img[0].complete) {
      $('#test').fadeIn('slow');
      img[0].onload = function (){};
    }  else {
      img[0].onload = function() {
        $('#test').fadeIn('slow');
      }
    }
    });

    </script>
    <style>
    #test {

      display:none;

    }
    </style>
  </head>
  <body>
  </body>
</html>

-- 
gianiaz.net
di Giovanni Battista Lenoci 
P.le Bertacchi 66 
23100 Sondrio
cell. +39.347.7196482