<script type="text/javascript">
jQuery(document).ready(function(){
setTimeout(function(){
    jQuery('.my-image').each(function(){
        jQuery(this).greyScale({
            fadeTime: 200,
            reverse: false
        });
        $(this).animate({ 'opacity' : 1 }, 1000);
        $(this).load(function(){
            jQuery(this).greyScale({
                fadeTime: 200,
                reverse: false
            });
            $(this).animate({ 'opacity' : 1 }, 1000);
        });
    });
}, 200);
});
</script>

W powyższym przykładzie używam funkcji greyScale (), która powiela obraz na płótnie i zachowuje obie wersje (szary = domyślny, kolor = najechanie).

Działa dobrze w 99% przypadków, ALE gdy przeglądarka uruchamia się po raz pierwszy, czasami nie ładuje 1 obrazu, 2 obrazów lub czegoś podobnego. To jest tak, że zarówno „ładowanie”, jak i „normalne zdarzenie” nie zadziałały.

Czy ktoś może potwierdzić, że robię to dobrze? Próbuję załadować to zdarzenie, jeśli obraz już tam jest lub jeśli go tam nie ma, istnieje alternatywa „load ()”, aby upewnić się, że wykona się po załadowaniu. Logicznie wydaje się to dobrym rozwiązaniem.