Centrer Préload & Image

**malabarbe** · 12/10/2009, 13h00

Bonjour à tous,

J'ai trouvé un script pour précharger et afficher
une image lourde.

Une petite image d'attente s'affiche pendant la
mise en cache de la grosse image, puis la petite
image est remplaçée par la grosse image.

Ce script me va tout a fait, ce que je voudrais,
c'est que l'image d'attente et la grosse image
soient affichées au milieu de la page (frame) 50%,50%.

La page d'appel :

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
 
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
 
<script type="text/javascript"
  src="preload.js">
</script>
 
</head>
<body>
<!– avec redimensionnement –>
<CENTER>
<img src="attente.gif" onload="preload (this, '../images/maxi/3280.jpg', null, 414, 643)"/>
 
</body></html>

Le fichier preload.js :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
preload = function (o, img_src, w, h) 
{
  var img = new Image ();
  img.onload = function () 
 {
    o.onload = null;
    if (w) o.width  = w;
    if (h) o.height = h;
    o.src = img.src
  };
  img.src = img_src;
}

- attente.gif (petit gif animé 4 Ko)
- 3280.jpg (grosse image 2, Mo)

J'ai esseyé avec du CSS et/ou un DIV mais
sans résultat !

Je crois que c'est plus du ressort du JavaScript.
Un conseil serai le bienvenu

Bonne journée.

**le_chomeur** · 12/10/2009, 13h16

en css tu peux parfaitement positionner un élément verticalemen/horizontalement :

http://css.developpez.com/faq/?page=...calement_block

Invité · 12/10/2009, 13h18

jour

ceci devrait suffir pour centre l'image

Code :

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

1
2
3
4
5
6
 
var mage=document.getElementById('monimage')
 
mage.style.left=((document.documentElement.clientWidth-mage.offsetWidth)/2)+'px';
 
mage.style.top=(document.documentElement.clientHeight-mage.offsetHeight)/2+"px";

**malabarbe** · 12/10/2009, 14h17

Merci pour vos réponses.

J'ai pris l'exemple du lien, il y a un début de bien, mais pas centré !

Voici le nouveau code :

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
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Nouvelle page 2</title>
 
<script type="text/javascript"
  src="preload.js">
</script>
 
<style type="text/css">
#parent {
	position : relative;
	width : 500px;
	height : 500px;
	border : 1px solid red;
}
 
#enfant {
	position:absolute;
	top: 50%; /* pour centrage vertical */
	left: 50%; /*pour centrage horizontal */
	width : 200px;
	height : 200px;
	margin-top: -100px; /* margin-top = - height/2 */
	margin-left: -100px; /* margin-left = - width/2 */
	border : 1px solid green;
}
</style>
 
</head>
<body>
<CENTER>
<div id="parent">
	<div id="enfant">
<img src="ajax-loader.gif" onload="preload (this, '../images/maxi/3280.jpg', null, 414, 643, 100)"/>
	</div>
</div>
 
</body>
</html>

Le résultat est visible sur : http://www.bonturf.com/tests/att-01.php

J'ai laissé les bordures aux DIV's pour voir leurs positionnement.

PS: Mes grosse images ont toujours la mème dimention.

Invité · 12/10/2009, 18h38

met margin left en auto

Code :

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

1
2
3
4
5
6
7
8
9
10
#enfant {
	position:absolute;
	top: 15%; /* pour centrage vertical */
	left: 20%; /*pour centrage horizontal */
/*	width : 50px;*/
/*	height : 200px;*/
	margin-top: -100px; /* margin-top = - height/2 */
	margin-left:auto;
	border : 1px solid green;
}

**malabarbe** · 12/10/2009, 19h21

Hélas !

Non, la grande image ne ce centre pas, mais s'affiche
avec comme point de départ le coin supérieur gauche
de la petite image !

Avec le code suivant, la grande image est centrée, mais
la petite est affichée au coin supérieur gauche de la grande !

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
#enfant {
	position:absolute;
	top: 35%; /* pour centrage vertical */
	left: -11%; /*pour centrage horizontal */
/*	width : 50px;*/
/*	height : 200px;*/
	margin-top: -100px; /* margin-top = - height/2 */
	margin-left:auto;  /*-100px; /* margin-left = - width/2 */
	border : 1px solid green;
}
</style>

Pour info, testé en résolution 1024 X 768

J'aurais du poser ma question dans le forum CSS vu
que l'on ne touche pas au JavaScript !

Centrer Préload & Image

JavaScript

Discussions similaires

Partager

Partager