Chargement d'iframes contenant des images

**identifiant_bidon** · 29/06/2011, 22h30

Bonjour à tous,

Je dispose d'une page dans laquelle j'ai plusieurs boutons (une dizaine). Dès que je clique sur un bouton, une iframe correspondant à chaque bouton passe en display:block alors qu'ils sont a la base en display:none. Chaque page chargée dans son iframe est une galerie d'images (des miniatures).

Mon souci est que le temps de chargement est excessivement long au chargement global de la page. L'effet obtenu est une page avec ma dizaine de boutons et un temps de chargement très très long.

Quelqu'un a-t-il une idée afin de ne pas avoir à charger le contenu des iframes au chargement de la page ? ou faire en sorte que le chargement de la page soit plus rapide ?

Merci

**Eric2a** · 29/06/2011, 23h00

Salut,

À mon avis, dans ce cas, les iframes ne devraient pas être codées en dur dans la page HTML. Ils suffirait de leur réserver un emplacement du type :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<div id="frame1"></div>

Et une fois qu'un bouton est appuyé, on ajoute l'iframe associée dans l'arbre DOM pour obtenir :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<div id="frame1"><iframe src="page-associee.html" ... /></div>

**identifiant_bidon** · 29/06/2011, 23h11

Salut Eric et merci pour ta réponse.

Ta solution me conviendrait bien. Je connais un peu DOM mais sans +. En tout cas, je saurai me débrouiller. Mais tu es sur que chaque iframe ne se "chargerait" alors qu'en cliquant sur le bouton correspondant ? A vrai dire, cela me semblerait logique mais je voudrais en être vraiment sur avant de commencer à m'y mettre.

**Eric2a** · 29/06/2011, 23h20

Voici un exemple d'iframe chargée dynamiquement une fois le document chargé

Code html :

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
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Test</title>
	<script type="text/javascript">//<![CDATA[
                function appendIframe(elt,url,width,height){
                        var i,e,d=document.getElementById(elt);
                        if(!d)return;
                        try{
                                i=document.createElement('iframe');
                                i.setAttribute('src',url);
                                i.setAttribute('width',width);
                                i.setAttribute('height',height);
                                i.setAttribute('frameborder','0');
                                i.setAttribute('scrolling','auto');
                                i.setAttribute('hspace','0');
                                i.setAttribute('vspace','0');
                                i.setAttribute('marginheight','0');
                                i.setAttribute('marginwidth','0');
                                i.style.padding='0';
                                i.style.margin='0';
                                i.style.border='none';
                                while(d.hasChildNodes())d.removeChild(d.lastChild);
                                d.appendChild(i);
                        }catch(e){}
                }
                window.onload=function(){
                        appendIframe('frame1','page.html','400','300');
                }
        //]]>
        </script>
</head>
<body>
	<div id="frame1"></div>
</body>
</html>

**identifiant_bidon** · 29/06/2011, 23h23

Super Eric. Je vois ça demain (là, j'suis un peu crevé

).
J'te fais confiance et je considère le problème comme résolu.

Merci beaucoup

Chargement d'iframes contenant des images

Langage PHP

Discussions similaires

Partager

Partager