Salut,
Aidez moi s'il vous plait, j'ai une page avec pleins d'iframe mais si tous charge en même temps, ça fait pas beau, tout est ralenti !
Alors je souhaite savoir comment empêcher le chargement des iframe et ainsi l'utilisateur pourra passer la souris au dessus d'un lien ("aperçu") pour que l'iframe se charge.
Voilà mon code (un echo de php) où il y a les iframe :

a.tooltip em {
    display:none;
}
a.tooltip:hover {
    border: 0;
    z-index: 500;
    text-decoration:none;
}
a.tooltip:hover em {
    font-style: normal;
    display: block;
    position: fixed;
    top: 50px;
    left:37.5%;
    padding: 0px;
    color: #000;
    border: 2px solid rgba(127,101,150, 0.7);
    background: #EDF6FF;
    width:25%;
    height:300px;
}

<h3>Fichiers du cahier de texte :</h3><?php
    if (is_dir("./ressources"))
    {
    if ($dh = opendir("./ressources"))
        {
            while (($file = readdir($dh)) !== false )
            {
            if($file != '.' && $file != '..')
            {
            $path_parts = pathinfo($file);
            $ext = $path_parts['extension'];
            $nom = $path_parts['filename'];
            $nom = ucwords($nom);
            setlocale(LC_TIME, 'fr_FR.utf8','fra');
            date_default_timezone_set('Europe/Paris');
            $datecode=filemtime('ressources/'.$file);
            $date=utf8_encode(strftime("%A %d %B %Y, %Hh", $datecode));
            $date=ucfirst($date);
                if($ext=='ppsx')
                {
                $lien='#';
                }else{
                $lien='ressources/'.$file;
                }
            echo '<table><tr>
            <td><a rel="nofollow" class="tooltip" href="ressources/'.$file.'" target="_blank">
            <img src="'.$lien.'" style="padding:10px;height:50px;color: #000;border: 2px             solid;rgba(127,101,150, 0.7);background: #EDF6FF;" alt="&nbsp;Aperçu&nbsp;"     title="Aperçu">
            <em><iframe style="overflow:hidden;border:0px;" width="100%" height="300px" src="'.    $lien.'"></iframe></em></a>
            &nbsp;&nbsp;––&nbsp;&nbsp;
            <a rel="nofollow" class="tooltip" href="ressources/'.$file.'" target="_blank">'.$nom.'</a>
            <span style="font-size:10px;">&nbsp;&nbsp;––&nbsp;&nbsp;'.$date.'</span></td>
            </tr></table><br>';
 
                if($_SESSION['verif']=='admin')
                {
echo '<form action="ressources.php" method="post">
<input type="hidden" name="delete" value="' . $file . '"/>
<input type="submit" name="submit" value="Supprimer" /></form><br>';
                }
            }
        }
    closedir($dh);
    }
    }
    ?>
    </center>

J'ai la marche à suivre :

On stocke les src des iframe dans un attribut data-src (HTML5). Quand l'utilisateur passe la souris au-dessus d'une iframe, on récupère data-src, et on le met dans src, ce qui charge l'iframe.
Puis quand l'utilisateur met la souris en dehors, on supprime l'attribut src.

Mais je ne sais pas trop comment faire

Aidez moi s'il vous palit !!
merci d'avance