[TOUTES VERSIONS] imgComplete

Voir le sujet précédent Voir le sujet suivant Aller en bas

[TOUTES VERSIONS] imgComplete

Icône par defaut le Sam 11 Fév 2017 - 12:12
no_way
avatar
Nouveau membre

Messageno_way

  • 16px
  • 24px
  • Zoom
Bonjour.

Voici une toute petite fonction permettant de déclencher une fonction au chargement complet d'une ou de plusieurs images, il faut un minimum de connaissance en JS car cette fonction est destinée aux codeurs.

Le code:
Code:
~function(){
    if(this.imgComplete==undefined)this.imgComplete=function(l,fn,args,cps){
        "use strict";
        try{
            var args=args||[],lnc=[],i,cps=cps||25,img,l;
            if(!Array.isArray(l)){
                l=[].map.call(l,function(e){return e});
            }
            if(!Array.isArray(l)||!l.length)throw "argument 1 n'est pas un tableau et n'a pas pu être converti.";
            for(i in l){if(!l[i].nodeName||l[i].nodeName.toLowerCase()!="img")throw "argument 1 n'est pas un tableau d'images ou contient des éléments autres que des images.";}
            if(typeof fn!="function")throw "argument 2 n'est pas une fonction";
            for(i=0;i<l.length;i++){
                img=l[i];
                img.complete?fn.apply(img,args):lnc.push(img);
            }
            l=img=null;
            lnc.length&&setTimeout(imgComplete,Math.round(1000/Math.min(100,Math.max(1,cps))),lnc,fn,args,cps);
        }catch(e){
            console&&console.error&&console.error(e);
        }
    };
}(window);

La syntaxe:
imgComplete(liste,fonction[,arguments[,cycles_par_seconde]]);

liste peut être une liste NodeList, un tableau, ou un objet contenant les images.

fonction est la fonction invoquée sur chaque image dans la liste dont le chargement est complet, this vaudra l'image en question.

arguments est optionnel et représente un tableau d'arguments pour la fonction invoquée.

cycles_par_seconde est optionnel et représente le taux de rafraîchissement, par défaut 25. Ainsi imgComplete peut détecter le chargement complet des images toutes les 1000/25=40 millisecondes. J'ai ajouté cette option au cas où mais vous ne devriez pas en avoir besoin.

Un exemple basique:
Code:
var maFonction=function(){
    alert(this.src+"\n"+this.naturalWidth+"x"+this.naturalHeight+"px");
};
/*
La liste peut être un objet jQuery:
var listeImages=$("img");
*/
var listeImages=document.querySelectorAll("img");
imgComplete(listeImages,maFonction);

Re: [TOUTES VERSIONS] imgComplete

Icône par defaut le Sam 11 Fév 2017 - 12:51
R_max
avatar
Membre

MessageR_max

  • 16px
  • 24px
  • Zoom
bonjour .. hinhin
merci Arnaud . ... pour ce petit script ... clin oeil

Re: [TOUTES VERSIONS] imgComplete

Icône par defaut le Sam 11 Fév 2017 - 19:10
Milouze14
avatar
Fondateur

MessageMilouze14

  • 16px
  • 24px
  • Zoom
Hello et merci Arnaud clin oeil ,
va falloir faire travailler nos méninges regardeplusbas


[Vous devez être inscrit et connecté pour voir cette image]

-Le respect de nos semblables est la règle de notre conduite.-

Fondateur des forums


[Vous devez être inscrit et connecté pour voir ce lien][Vous devez être inscrit et connecté pour voir ce lien]



Re: [TOUTES VERSIONS] imgComplete

Icône par defaut le Sam 11 Fév 2017 - 19:22
no_way
avatar
Nouveau membre

Messageno_way

  • 16px
  • 24px
  • Zoom
De rien, en espérant qu'elle vous soit aussi utile qu'à moi mdr

Re: [TOUTES VERSIONS] imgComplete

Icône par defaut le Sam 11 Fév 2017 - 20:29
Milouze14
avatar
Fondateur

MessageMilouze14

  • 16px
  • 24px
  • Zoom
Hum, pour ma pomme je n'en sais rien , je n'ai pas encore testé.
Par contre, j'en connais un qui va sauter de son canapé mdr .


[Vous devez être inscrit et connecté pour voir cette image]

-Le respect de nos semblables est la règle de notre conduite.-

Fondateur des forums


[Vous devez être inscrit et connecté pour voir ce lien][Vous devez être inscrit et connecté pour voir ce lien]



Re: [TOUTES VERSIONS] imgComplete

Icône par defaut le Sam 11 Fév 2017 - 21:54
R_max
avatar
Membre

MessageR_max

  • 16px
  • 24px
  • Zoom
Par contre, j'en connais un qui va sauter de son canapé

ont peut avoir un indice ?

sinon , a quoi sert cette astuce dans le détails ?

Re: [TOUTES VERSIONS] imgComplete

Icône par defaut le Sam 11 Fév 2017 - 22:45
no_way
avatar
Nouveau membre

Messageno_way

  • 16px
  • 24px
  • Zoom
[Vous devez être inscrit et connecté pour voir ce lien] voici quelques avantages:

1. JavaScript pur et dur, aucune dépendance vis à vis d'une quelconque librairie.

2. jQuery propose la possibilité de déclencher une fonction une fois toutes les ressources chargées, sauf que si une image ou toute autre ressource prend beaucoup de temps à charger, le déclenchement de la fonction est d'autant retardée et se fait sur la liste complète, d'une traite, ce n'est pas forcément voulu.

3.Utiliser un écouteur d’évènement load sur les images ne garantit pas que le navigateur lancera l'évènement load, avec imgComplete, c'est garanti.

Re: [TOUTES VERSIONS] imgComplete

Icône par defaut le Sam 11 Fév 2017 - 22:55
R_max
avatar
Membre

MessageR_max

  • 16px
  • 24px
  • Zoom
merci pour ce complément d'information , je comprend mieux ..

bonne soirée a toi Arnaud. et passe un bon dimanche ......

Re: [TOUTES VERSIONS] imgComplete

Icône par defaut le Sam 11 Fév 2017 - 22:59
no_way
avatar
Nouveau membre

Messageno_way

  • 16px
  • 24px
  • Zoom
Je t'en prie, bonne soirée à toi aussi ;)

Re: [TOUTES VERSIONS] imgComplete

Icône par defaut le Dim 12 Fév 2017 - 9:09
photoclic
avatar
Membre

Messagephotoclic

  • 16px
  • 24px
  • Zoom
Bonjour tous, et merci Arnaud.

Cette fonction ne permettrait-elle pas de répondre à un de mes rêves : [Vous devez être inscrit et connecté pour voir ce lien]
Ce serait géant ça.

Re: [TOUTES VERSIONS] imgComplete

Icône par defaut le Dim 12 Fév 2017 - 10:19
no_way
avatar
Nouveau membre

Messageno_way

  • 16px
  • 24px
  • Zoom
Salut !
Alors non, cette fonction ne conviendra pas à ta demande mais pour info le script que je t'ai écrit pour les exifs l'utilise ;)

Re: [TOUTES VERSIONS] imgComplete

Icône par defaut le Dim 12 Fév 2017 - 21:41
photoclic
avatar
Membre

Messagephotoclic

  • 16px
  • 24px
  • Zoom
Merci Arnaud pour ta réponse.

Ah oui, je viens de passer sur ton script, très efficace en effet etoile

Si t'as une idée pour mon rêve du dessus, je repasse par l'entr'aide ...:)

Re: [TOUTES VERSIONS] imgComplete

Icône par defaut le Lun 13 Fév 2017 - 15:21
no_way
avatar
Nouveau membre

Messageno_way

  • 16px
  • 24px
  • Zoom
Pour ton "rêve":
Objectivement,
Soit tu passes par un script JS mais ce sera très lent,
Soit tu utilises PHP et mySQL pour stocker les images...
Idéalement je verrais plus la deuxième solution,
Bien qu'elle soit assez lourde à développer.
La question est:
Est-ce que ton ami peut le faire pour toi?

Re: [TOUTES VERSIONS] imgComplete

Icône par defaut le Lun 13 Fév 2017 - 19:46
photoclic
avatar
Membre

Messagephotoclic

  • 16px
  • 24px
  • Zoom
Bonsoir Arnaud,
Si j'ai bien compris la seconde solution consisterait à poster les photos en extérieurs dans une base de donnée. Un développement lourd pour faire cela n'en vaut pas la peine, ça doit correspondre quasiment à créer un forum je suppose. Donc non par rapport au temps de développement nécessaire.

Par contre une solution 2 limitée, c'est à dire par exemple en se limitant aux 10 ou 20 dernières photos postées par un membre pour éviter une lenteur trop importante serait déjà vraiment top (Si un jour le cœur t'en dit Arnaud clin oeil ).

Voir le sujet précédent Voir le sujet suivant Revenir en haut

Créer un compte ou se connecter pour répondre

Vous devez être membre pour répondre.

S'enregistrer

Rejoignez notre communauté ! C'est facile !


S'enregistrer

Connexion

Vous êtes déjà membre ? Aucun soucis, cliquez ici pour vous connecter.


Connexion

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum