1. #1
    Membre à l'essai
    Homme Profil pro
    Technicien maintenance
    Inscrit en
    juin 2015
    Messages
    17
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Savoie (Rhône Alpes)

    Informations professionnelles :
    Activité : Technicien maintenance

    Informations forums :
    Inscription : juin 2015
    Messages : 17
    Points : 15
    Points
    15

    Par défaut Charger dynamiquement des éléments lorsqu'on scroll à la souris

    Bonjour à tous,
    J'aimerais savoir comment faire pour charger un bout de page et charger le reste dynamiquement lorsqu'on scroll à la souris. J'ai cherché des tutos sur le web mais je n'ai trouvé que des tutos avec JQUERY... Je ne connais pas ce langage, j'ai regardé vite fait je trouve la syntaxe illisible J'ai cru comprendre que c'est un dérivé de Javascript qui a été simplifié donc je me dis que ça doit être aisément réalisable avec du JS mais je ne sais pas comment m'y prendre
    J'ai pensé à définir des seuils en % scrollés sur la page qui déclenchent des fonctions qui ajoutent du contenue au fur et à mesure mais je trouve ça lourd d'autant plus qu'on ne connais pas la résolution de l'utilisateur.
    Vous avez une idée ?

  2. #2
    Membre averti
    Homme Profil pro
    Analyse système
    Inscrit en
    mai 2014
    Messages
    207
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Arménie

    Informations professionnelles :
    Activité : Analyse système
    Secteur : Arts - Culture

    Informations forums :
    Inscription : mai 2014
    Messages : 207
    Points : 306
    Points
    306

    Par défaut

    Bonsoir,

    Un peu bizarre, cette idée de rajouter du code lorsqu'on agit sur la molette de la souris. Mais bon. Pourquoi pas?

    Fichier index.html :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <script>
          function ajout_code() {
            script_complementaire=document.createElement("script");
            script_complementaire.src="complement.js";
            document.body.appendChild(script_complementaire);
          }
          onscroll=function() { ajout_code(); };
        </script>
      </head>
      <body>
        <p>Une page permettant de faire fonctionner la molette de la souris...</p>
        <br><br><br><br><br><br><br><br><br><br><br>
        <br><br><br><br><br><br><br><br><br><br><br>
        <br><br><br><br><br><br><br><br><br><br><br>
        <br><br><br><br><br><br><br><br><br><br><br>
        <br><br><br><br><br><br><br><br><br><br><br>
        <br><br><br><br><br><br><br><br><br><br><br>
      </body>
    </html>
    Fichier complement.js :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    alert("Le script complémentaire est appelé!");
    J'ai testé avec Firefox... Je ne suis pas certain que l'événement onscroll s'écrit de la même manière avec l'ensemble des navigateurs.

  3. #3
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    février 2009
    Messages
    5 734
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 67
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : février 2009
    Messages : 5 734
    Points : 21 094
    Points
    21 094
    Billets dans le blog
    39

    Par défaut

    Citation Envoyé par eleydet Voir le message
    [...] Un peu bizarre, cette idée de rajouter du code lorsqu'on agit sur la molette de la souris. Mais bon. Pourquoi pas? [...]
    C'est la pire idée qui soit !

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    window.addEventListener( "scroll", ev => {
    	const script_complementaire = document.createElement( "script" );
    	script_complementaire.src = "test7.js"; // un fichier JS quelconque mais valide !
    	document.querySelector( "body" ).appendChild( script_complementaire );
    });
    On ajoute alors des centaines d'éléments "script" car cela se produit sur le "scroll" descendant et sur le "scroll" ascendant !

    Ensuite on recommence !

    Blog



    Nota bene : si vous devez être compatible avec les navigateurs obsolètes (IE8 et plus), vous devez convertir les codes ES2015 en ES5 avec Babel.

    FAQ JS Tutoriels JS

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  4. #4
    Membre à l'essai
    Homme Profil pro
    Technicien maintenance
    Inscrit en
    juin 2015
    Messages
    17
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Savoie (Rhône Alpes)

    Informations professionnelles :
    Activité : Technicien maintenance

    Informations forums :
    Inscription : juin 2015
    Messages : 17
    Points : 15
    Points
    15

    Par défaut

    Je crois que je me suis mal exprimé
    Prenez ce site par exemple : https://chrome.google.com/webstore/category/extensions
    Si vous scrollez vers le bas vous verrez que de nouveaux éléments se chargent au fur et à mesure. On est assez loin d'un simple event onscroll.

Discussions similaires

  1. Comment charger dynamiquement des fichier XAML ?
    Par AliJava dans le forum Windows Presentation Foundation
    Réponses: 4
    Dernier message: 09/10/2009, 16h45
  2. Disposition dynamique des éléments enfants dans un StackPanel
    Par FRED.G dans le forum Windows Presentation Foundation
    Réponses: 7
    Dernier message: 02/02/2009, 12h03
  3. Réponses: 1
    Dernier message: 09/05/2007, 16h35
  4. Parcours dynamique des éléments d'un form
    Par leminipouce dans le forum JavaScript
    Réponses: 8
    Dernier message: 02/10/2006, 19h09
  5. [FLASH 8] Charger dynamiquement des bmp depuis une url
    Par matN59 dans le forum Intégration
    Réponses: 1
    Dernier message: 24/04/2006, 15h24

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo