[script] Préchargement d'image et AJAX

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par biscuit, 22 Août 2007.

  1. biscuit
    biscuit WRInaute occasionnel
    Inscrit:
    5 Juin 2006
    Messages:
    425
    J'aime reçus:
    0
    Salut toutes et tous,

    J'ai un petit problème (edit: résolu) avec un préchargement d'image. Le script ci-dessous fontionne très bien si je l'appelle directement... mais pas du tout si il est appelé depuis une autre page via une requête AJAX. Quelqu'un a une petite idée? Merci

    -edit: suppression du code qui ne fonctionnait pas... celui qui fonctionne est plus bas et édition du titre
     
  2. biscuit
    biscuit WRInaute occasionnel
    Inscrit:
    5 Juin 2006
    Messages:
    425
    J'aime reçus:
    0
    Bon ben j'ai trouvé... j'ai pas la moindre idée de ce que j'ai fait à force de changer un petit truc par ci par là... mais c'est bon.

    Le script complet permet d'ouvrir une fausse popup en div (en appliquant un alpha à l'arrière plan) et d'y charger un contenu en ajax, en l'occurence une image avec un petit gif en attendant le chargement complet de l'image. Démo ici **** (l'image fait près de 2Mo si jamais)

    Pour ceux que ça intéresse, Je met le code au propre (parce que là c'est très brouillon) et vous donne le code ce soir...

    -edit: modification de l'url de démo
     
  3. Seraph
    Seraph WRInaute occasionnel
    Inscrit:
    2 Avril 2006
    Messages:
    307
    J'aime reçus:
    0
    Ce serait cool !! :p
    Merci !
     
  4. arnaudmn
    arnaudmn WRInaute passionné
    Inscrit:
    11 Mai 2005
    Messages:
    1 038
    J'aime reçus:
    2
    Il me semble qu'il y a plus simple.
    Si on fait simplement ça :
    Code:
    <img id="monimage" src="l_image_d_attente">
    <script>
    document.getElementById("monimage").src = "la_grosse_image_a_afficher";
    </script>
    on as bien une image d'attente (celle qui s'appele "l_image_d_attente.gif"), et quelques secondes plus tard, la grosse image apparait à la place.
    C'est (a peu prêt) ce que j'utilise sur mon annuaire pour afficher les ascreen des sites qui sont un peu lent.
     
  5. biscuit
    biscuit WRInaute occasionnel
    Inscrit:
    5 Juin 2006
    Messages:
    425
    J'aime reçus:
    0
    A tester... mais à priori je dirai que dès que l'image est trouvée, l'image d'attente est supprimée et remplacée par la grosse image alors que celle-ci n'est pas entiérement chargée (tes ascreen font quelques ko, c'est la connexion qui est lente)
     
  6. arnaudmn
    arnaudmn WRInaute passionné
    Inscrit:
    11 Mai 2005
    Messages:
    1 038
    J'aime reçus:
    2
    Ben ..... joker :) En effet, faudrait qu'un volontaire test. Je te déclare volontaire ! 8)
     
  7. ZelkiN
    ZelkiN WRInaute occasionnel
    Inscrit:
    27 Juillet 2007
    Messages:
    458
    J'aime reçus:
    0
    ca me parait pas mal aussi, je vote pour que biscuit soit volontaire ^^
     
  8. arnaudmn
    arnaudmn WRInaute passionné
    Inscrit:
    11 Mai 2005
    Messages:
    1 038
    J'aime reçus:
    2
    En effet. On voit l'image s'afficher petit a petit.
     
  9. biscuit
    biscuit WRInaute occasionnel
    Inscrit:
    5 Juin 2006
    Messages:
    425
    J'aime reçus:
    0
    C'est ce que je pensais, mais c'est bon d'être sûr... merci d'avoir fait le teste arnaudmn... (j'l'aurai fait sous la pression :wink: :D )

    Comme promis je vous donne le code...
    Démo ici: ****(videz le cache si vous y êtes déjà allé)
    Script téléchargeable ici : ****(1400 Ko)

    J'ai testé sur IE7 et FF2 ... si il y a des problèmes ailleurs merci de me le dire...

    Fichier ajax_popup.html

    Code:
    ****
    fichier image.html

    Code:
    ****
     
  10. mahefarivony
    mahefarivony WRInaute accro
    Inscrit:
    14 Octobre 2002
    Messages:
    8 081
    J'aime reçus:
    0
    je veux bien mais pourquoi qu'il a été supprimé le code ?
     
Chargement...
Similar Threads - [script] Préchargement image Forum Date
[script] anti spam referrer Développement d'un site Web ou d'une appli mobile 20 Août 2015
[script] miniature et cache d'image à la volée Développement d'un site Web ou d'une appli mobile 13 Décembre 2013
[script] changer un texte en images Développement d'un site Web ou d'une appli mobile 10 Décembre 2013
[Script] Ajouter les boutons de partage des réseaux sociaux sans le tracking Développement d'un site Web ou d'une appli mobile 25 Août 2013
[Script] Clone légal? Développement d'un site Web ou d'une appli mobile 7 Avril 2013
[script] Comment charger un script différent suivant l'heure ? Help ! Développement d'un site Web ou d'une appli mobile 4 Octobre 2012
[script] Oméga-Annonces 1.5.1 - Php/MySqL Développement d'un site Web ou d'une appli mobile 4 Septembre 2012
[script] tracking formulaire d'affiliation Développement d'un site Web ou d'une appli mobile 5 Août 2012
[Script] - Interroger et manipuler Wordpress directement via un script PHP en crontab Développement d'un site Web ou d'une appli mobile 26 Avril 2012
[Script] Pour charger un fichier et le mettre sur son serveur Développement d'un site Web ou d'une appli mobile 6 Mars 2012
[SCRIPT] Topsite Développement d'un site Web ou d'une appli mobile 28 Août 2011
[script] probleme confirm() javascript+ PHP Développement d'un site Web ou d'une appli mobile 7 Juin 2011
[script] gestion d'annuaires photos Développement d'un site Web ou d'une appli mobile 21 Avril 2011
Gestion des Majuscules [script] - PHP / javascript Développement d'un site Web ou d'une appli mobile 9 Mars 2011
[script] php class cache : accélérez vos pages ! Développement d'un site Web ou d'une appli mobile 8 Mars 2011
[Script] Publicité en geolocalisation Développement d'un site Web ou d'une appli mobile 10 Novembre 2010
[script] Recherche script d'échange de clics Développement d'un site Web ou d'une appli mobile 29 Septembre 2010
[Script] Créer un Lightbox.. Développement d'un site Web ou d'une appli mobile 25 Août 2010
[script] Mise en cache des pages PHP - V2 Développement d'un site Web ou d'une appli mobile 6 Août 2010
[Script] PHP ne fonctionne pas Développement d'un site Web ou d'une appli mobile 7 Juin 2010