11552 sujets

JavaScript, DOM et API Web HTML5

SildeDown sur une image une fois qu'elle est complètement chargée

Salut @ tous !

Je but sur un problème avec jQuery :
J'ai un formulaire d'upload en ajax créé à l'aide du plug-in uploadify.
Une fois l'image téléchargée sur le serveur, je remplis une DIV vide existant sur la page avec la photo qui vient d'être uploadée :
$('#DIV_photo').append('<img src="upload/ma_photo.jpg" alt="" />');
Puis je fais un slideDown du DIV :
$('#DIV_photo').slideDown('slow', function(){});
Le problème est que le slideDown se fait alors que la photo n'est pas encore chargée.
Comment faire pour déclencher le slideDown une fois la photo uploadée complètement chargée ?

Merci pour votre aide...
Modifié par 6ber6ou (05 Oct 2011 - 16:22)
Bonjour,

Sans voir le code dans son ensemble, et surtout sans savoir où sont appelés les fragments que tu cite, c'est un peu compliqué de te répondre. En regardant la documentation de uploadify, j'ai vu dans les event onAllComplete qui permet d'exécuter une fonction quand les fichiers sont chargés: est-ce que tu l'utilise?
Je vais essayer de simplifier mon code :

Index.php :
<form action="http://localhost/creer_annonce" method="post" enctype="multipart/form-data" id="form_upload">
    <div id="uploader_file_attente">
    </div>
    <div id="uploader">
        <input type="file" id="file_upload" name="file_upload" />
    </div>
</form>
Upload.js
$(document).ready(function()
    {
    $('#file_upload').uploadify(
        {
        'auto':true,
        'buttonImg':'/images/uploadify_bouton.png',		
        'cancelImg':'/images/uploadify_cancel.png',
        'expressInstall':'/jq/uploadify_2_1_4/expressInstall.swf',
        'fileDesc':'Fichiers JPG ou JPEG',
        'fileExt':'*.jpg;*.jpeg',
        'folder':'/photos',		
        'height':38,
        'queueID':'uploader_file_attente',
        'rollover':true,
        'script':'/php/uploadify.php',
        'sizeLimit':10000000,
        'uploader':'/jq/uploadify_2_1_4/uploadify.swf',
        'width':196,
        'onOpen':function(event, ID, fileObj)
            {
            $('#uploader_file_attente').slideDown('slow', function(){});
            },
        'onComplete':function(event, ID, fileObj, response, data)
            {
            $('#uploader_file_attente').slideUp('slow', function(){});
            $('#photo_annonce').slideUp('slow', function(){});
            $('#photo_annonce').html('').append('<img src="/photos/photo_inconnue.png" alt="Photo du produit" id="photo_annonce" />')

            // ATTENDRE LE CHARGEMENT COMPLET DE LA PHOTO ET FAIRE UN SLIDEDOWN

            return false;										
            },
        'onError':function(event, ID, fileObj, errorObj)
            {
            $('#uploader_file_attente').hide();
            $('#erreur_upload').append('Erreur lors de l\'envoi du fichier !<br /><span class="texte_non_gras">(Vérifiez que le type et la taille du fichier sont corrects.)</span>');
            $('.fileName').hide();
            return false;
            }
        });
    });
Je pense comme tu le dis qu'il faut ajouter qqchose dans le onAllComplete mais je ne vois pas quoi
Modifié par 6ber6ou (05 Oct 2011 - 21:00)
En cherchant load listener image jquery sur google je suis tombé sur ce site qui parle (si j'ai bien compris) de problème de compatibilité entre addEventListener et IE < 9.
Heureusement ils donnent une alternative qui fonctionne avec IE < 9 normalement :
$("<img>", {src: '/photos/membre_' + id_membre + '/' + fileObj.name}).bind('load', function()
    {
    $('#uploader_file_attente').slideUp('slow', function(){});
    $('#photo_annonce').slideDown('slow', function(){});
    });

Et là ça marche Smiley cligne !!!
Merci pour l'aide.
Sujet clos
Aller à