Barre de pourcentage pendant 3 secondes sur le site...

[lampard73]

Bonjour, je recherche une extensions joomla ou un code pour créer une mini animation (barre de pourcentage) avec le pourcentage qui augmente jusqu'à 100% au chargment la de page avec un rond qui tourne, je souhaiterai qu'elle apparaisse 3 secondes et qu'elle disparaisse ensuite et que le site s'affiche. Si possible une extension gratuite et je voudrai egalement qu'on vois la page quand il y a la barre de chargement mais un peu grisé comme sur cette page, je voudrai truc de ce type : http://www.shape5.com/demo/index.php...d=37&Itemid=83

Merci

CDLT

[lesoutier]

Re : Barre de pourcentage pendant 3 secondes sur le site...

Tu as déja posé la question il y a quelques temps, et il me semble que tu avais recu des réponses concordantes, qui te déconseillaient ce genre de gadget (au pire il ne sert à rien si le chargement est rapide, ou bien il contribue à faire monter le taux d'adrénaline si le site est vraiment long à charger, et ça n'empêchera pas les visiteurs potentiels de se barrer).
Popurquoi les réponses seraient-elles différentes aujourd'hui ?

[lampard73]

Re : Barre de pourcentage pendant 3 secondes sur le site...

Je souhaiterai tout de meme faire cette chose...

Comment proceder ?

[jisse03]

Re : Barre de pourcentage pendant 3 secondes sur le site...

Je souhaiterai tout de meme faire cette chose...

Comment proceder ?

Bonjour,

En commençant par étudier un peu les tutos ici: http://www.siteduzero.com/, pour comprendre le minimum vital en PHP, JavaScript et CSS... Ensuite, il te restera à programmer ça.

Je ne pense pas que qui que ce soit d'autre ci voudrait insérer ce genre d egadget inutile, donc tu vas devoir te retrousser les manches

[lampard73]

Re : Barre de pourcentage pendant 3 secondes sur le site...

Apres plusieurs heures de recherche sur le net j'ai trouvé ce qui me convenait, j'ai trouvé ce script :

<!-- DEBUT DU SCRIPT --> <style type="text/css">
<!--
#cache {
position:absolute; top:170px; left:400px; z-index:10; visibility:hidden;
}
-->
</style>
<div id="cache">
<table cellspacing="0" cellpadding="0" border="0" bgcolor="#ffffff" width="400">
<tbody>
<tr>
<td valign="middle" align="center">
<table cellspacing="0" cellpadding="0" border="0" bgcolor="#000000" style="width: 396px; height: 111px;">
<tbody>
<tr>
<td valign="middle" align="center"><font size="4" face="Verdana" color="#ffffff"><b><font style="font-size: 13px;">Patientez!</font><br />
<img border="0" src="http://img15.hostingpics.net/pics/359424loadinfonet.gif" alt="" style="width: 73px; height: 73px;" /><br />
<font style="font-size: 10px;"></font><br />
<div style="text-align: right;"><a href="http://cyclisme49.wifeo.com/index.php"><font style="font-size: 10px;"><br />
</font></a></div>
</b></font></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<SCRIPT LANGUAGE="JavaScript">
/*
SCRIPT EDITE SUR L'EDITEUR JAVASCRIPT
<a href="http://www.editeurjavascript.com" target="_blank">http://www.editeurjavascript.com</a>
*/
var nava = (document.layers);
var dom = (document.getElementById);
var iex = (document.all);
if (nava) { cach = document.cache }
else if (dom) { cach = document.getElementById("cache").style }
else if (iex) { cach = cache.style }
largeur = screen.width;
cach.left = Math.round((largeur/100)-1000);
cach.visibility = "visible";

function cacheOff()
{
cach.visibility = "hidden";
}
window.onload = cacheOff
</SCRIPT> <!-- FIN DU SCRIPT -->

Mais je voudrai pouvoir réglé la durée de l'animation, car elle part beaucoup trop vite : je voudrai qu'elle reste 3 secondes

Et deuxième chose comment faire pour qu'on voit l'animation qui tourne au premier plan et que au deuxième plan la page soit un peu foncé et qu'une fois l'animation disparu que la page s'eclaircisse

Meme si comme vous me l'avez dit cela semble inutile je souhaite quand meme rajouter cet effet...

Merci

Cordialement

[daneel]

Re : Barre de pourcentage pendant 3 secondes sur le site...

Bonjour,

Ajouter de l'animation pour faire patienter au chargement de la page, ce n'est pas une bonne idée... Déjà pour le référencement qui impose d'importantes mesures d'optimisation du chargement de la page ( voir l'utilisation de l'outil "pagespeed" ) mais aussi pour la navigation qui ne sera pas pratique... Bref, tu est prévenu 3 fois (merci à Jisse et lesoutier) !

Toutefois, si tu insiste, tu peux lire le tuto de narconcept qui t'explique comment modifier ton template.

http://www.nartconcept.fr/joomla-archive/creer-un-indicateur-de-chargement-de-la-page.html

Bien évidemment, n'oublie pas de sauvegardez avant de modifier, il n'y a aucune garantie que cela fonctionne sur J!2.5 mais l'explication est là. A toi de remplacer l'animation gif par une barre de chargement avec du javascript. (Comme le dit Jisse, tu trouvera pas ici de guide pour comprendre le javascript, le siteduzero et beaucoup d'autres le font très bien). Bon courage !

Les animations de pré-chargement sont intéressantes dans quelques cas bien précis :

- le chargement en ajax : on évite de charger les modules et de rafraichir complétement la page, seul le contenu change :

http://extensions.joomla.org/extensions/site-management/site-performance/13293

demo : http://getsite.org.ua/jdemo/

- Pour les chargement d'images assez lourdes mais en popup (genre lightbox) comme dans l'exemple de shape5 que tu donne dans ton premier message. Il existe plusieurs types de lightbox dont certaines proposent de griser la page de fond :

http://www.joomlacontenteditor.net/downloads/mediabox/joomla-25

http://www.joomlacontenteditor.net/support/tutorials/jcemediabox/item/create-an-image-popup?category_id=54

Idéal pour afficher une vidéo et que le fond ne pertube pas la lecture

- insérer des pubs durant le chargement comme pour un site connu sur le cinéma :

http://extensions.joomla.org/extensions/style-a-design/popups-a-iframes/11693

- le chargement de fichiers volumineux comme les animations flash (ça existe encore?).

Bref, le preloading reste malgré tout encore d'actualité. Personnellement, si devais le faire, je partirai dans une animation en boucle en css3 comme les exemples : http://www.alessioatzeni.com/wp-cont...oop/index.html Visuellement, c'est plutôt réussi, non?

[lampard73]

Re : Barre de pourcentage pendant 3 secondes sur le site...

Voila j'ai modifié mon template, pour l'instant j'ai mis une image basique qui tourne toute simple pour tester ...

<?php /** * @copyright Copyright (C) 2011 JoomlaThemes.co - All Rights Reserved. **/
defined( '_JEXEC' ) or die( 'Restricted access' );
define( 'YOURBASEPATH', dirname(__FILE__) );
?>
<?php // no direct access
defined( '_JEXEC' ) or die( 'Restricted access' );
$slogandisable = $this->params->get("slogandisable");
$addthis = $this->params->get("addthis");
$footertext = $this->params->get("footertext");
$footerdisable = $this->params->get("footerdisable");
$googleanalytics = $this->params->get("googleanalytics");
$analyticsdisable = $this->params->get("analyticsdisable");
$socialbuttons = $this->params->get("socialbuttons");
$slidedisable = $this->params->get("slidedisable");
$slidedesc1 = $this->params->get("slidedesc1");
$url1 = $this->params->get("url1");
$slidedesc2 = $this->params->get("slidedesc2");
$url2 = $this->params->get("url2");
$slidedesc3 = $this->params->get("slidedesc3");
$url3 = $this->params->get("url3");
$slidedesc4 = $this->params->get("slidedesc4");
$url4 = $this->params->get("url4");
JHTML::_('behavior.framework', true);
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>">
<head>
<script type="text/javascript">
function hideLoading() {
document.getElementById('pageIsLoading').style.dis play = 'none';
}
</script>
<meta property="og:title" content="Olympique-Lyonnais" />
<meta property="og:type" content="sport" />
<meta property="og:url" content="http://olympique-lyonnais.fr/" />
<meta property="og:image" content="" />
<meta property="og:site_name" content="Olymoique-Lyonnais" />
<meta property="fb:admins" content="100000571817526" />
</td>
<tr>
</table>
</div>
<script type="text/javascript">
<!--
var DHTML = (document.getElementById || document.all || document.layers);
function ap_getObj(name)
{
if (document.getElementById)
{
return document.getElementById(name).style;
}
else if (document.all)
{
return document.all[name].style;
}
else if (document.layers)
{
return document.layers[name];
}
}

function ap_showWaitMessage(div, flag)
{
if (!DHTML) return;
var x = ap_getObj(div);
x.visibility = (flag) ? 'visible':'hidden'
if(! document.getElementById)
if(document.layers)
x.left=280/2;
return true;
}

ap_showWaitMessage('waitDiv', 1);
//-->
</script>
<link href='http://fonts.googleapis.com/css?family=Chivo' rel='stylesheet' type='text/css'>
<jdoc:include type="head" />
<?php require(YOURBASEPATH . DS . "functions.php"); ?>
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/styles.css" type="text/css" />
<?php if ($this->params->get( 'analyticsdisable' )) : ?>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', '<?php echo ($googleanalytics); ?>']);
_gaq.push(['_trackPageview']);

(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();

</script>
<?php endif; ?>
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/NivooSlider.css" type="text/css" />
<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/slideshow/NivooSlider.js"></script>
<script type="text/javascript">
window.addEvent('domready', function () {
// initialize Nivoo-Slider
new NivooSlider($('Slider'), {
effect: 'random',
interval: 5000,
orientation: 'random'
});
});
</script>
</head>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/fr_FR/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<body class="background">
<div id="main">
<div id="header-w">
<div id="header">
<div class="topmenu">
<jdoc:include type="modules" name="position-1" style="none" />
</div>
<?php if ($this->countModules('logo')) : ?>
<div class="logo">
<jdoc:include type="modules" name="logo" style="none" />
<jdoc:include type="modules" name="position-1" style="none" />
</div>
</div>
</div>
<?php else : ?>
<a href="<?php echo $this->baseurl ?>/">

</a>
<?php endif; ?>
<div class="slogan"><?php if ($this->params->get( 'slogandisable' )) : ?><?php echo ($slogan); ?><?php endif; ?></div>
<?php if ($this->countModules('top')) : ?>
<div class="top">
<jdoc:include type="modules" name="top" style="none"/>
</div>
<?php endif; ?>
</div>
</div>

[lampard73]

Re : Barre de pourcentage pendant 3 secondes sur le site...

<div id="wrapper">
<div id="navr">
<div class="tguser"><jdoc:include type="modules" name="position-0" style="none" /></div>
<div id="navl">
<div id="nav">
<div id="nav-left">
<jdoc:include type="modules" name="menuload" style="none" /></div>
<div id="nav-right">
<?php include "html/com_content/archive/component.php"; ?>
<?php if ($this->countModules('breadcrumb')) : ?>
class="clr">

<jdoc:include type="modules" name="breadcrumb" style="none"/>
<?php endif; ?>
<div class="clearpad"></div>
<div id="message">
<jdoc:include type="message" />
</div>
<?php if($this->countModules('left')) : ?>
<div id="leftbar-w">
<div id="sidebar">
<jdoc:include type="modules" name="left" style="jaw" /></div>
<!-- MODIFY social buttons here (add yours from addthis.com) -->
<?php if ($this->params->get( 'socialbuttons' )) : ?>
<div id="bookmark"><div id="addthis">
<div class="addthis_toolbox addthis_default_style addthis_32x32_style">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
</div>
<script type="text/javascript" src="<?php echo ($addthis); ?>"></script>
</div></div>
<?php endif; ?>
<!-- END of social script -->
</div>
<?php endif; ?>
<?php if($this->countModules('left') xor $this->countModules('right')) $maincol_sufix = '_md';
elseif(!$this->countModules('left') and !$this->countModules('right'))$maincol_sufix = '_bg';
else $maincol_sufix = ''; ?>
<div id="centercontent<?php echo $maincol_sufix; ?>">
<div class="clearpad"><jdoc:include type="component" /> </div></div>
<?php if($this->countModules('right') and JRequest::getCmd('layout') != 'form') : ?>
<div id="rightbar-w">
<div id="sidebar">
<jdoc:include type="modules" name="right" style="jaw" />
</div>
</div>
<?php endif; ?>
<div class="clr"></div>
</div>
</div>
</div>
</div>
<div id="user-bottom">
<div class="user1"><jdoc:include type="modules" name="user1" style="xhtml" /></div>
<div class="user2"><jdoc:include type="modules" name="user2" style="xhtml" /></div>
<div class="user3"><jdoc:include type="modules" name="user3" style="xhtml" /></div>
</div>
<?php if ($this->countModules('user7 or user8 or user9 or user10')) : ?>
<div id="tag"><jdoc:include type="modules" name="tag" /></div>
<div id="footer">
<div class="footer-pad">
<div class="top1"><div class="top2"><div class="top3"></div></div></div>
<div class="bot1"><div class="bot2"><div class="bot3"></div></div></div>
</div>
</div>
<?php endif; ?>
<div id="bottom">
<div class="tg">
<?php if ($this->params->get( 'footerdisable' )) : ?><?php echo ($footertext); ?><?php endif; ?></div></div>
<!-- Link protected by copyright law. DO NOT REMOVE! --><div class="design">Powered by <a href="http://www.freshjoomlatemplates.com/" title="joomla 1.7 templates" target="_blank">Joomla 1.7 Templates</a></div>
</div>
<script type="text/javascript">
if (window.addEventListener) {
window.addEventListener('load', hideLoading, false);
} else if (window.attachEvent) {
var r = window.attachEvent("onload", hideLoading);
} else {
hideLoading();
}
</script>
</body>
<div id="pageIsLoading"
style="
position: absolute;
display: block;
padding-left: 44px;
padding-right: 12px;
width: auto;
height: 46px;
line-height: 46px;
border: 1px solid #890000;
color: #000000;
font-weight: bold;
background-color: #e5e5e5;
background-image: url(http://img15.hostingpics.net/pics/35...dinfonet.gif);
background-position: 6px center;
background-repeat: no-repeat;">
<script type="text/javascript">
if (typeof window_width == 'undefined' || typeof window_height == 'undefined') {
var window_width;
var window_height;
if( typeof( window.innerWidth ) == 'number' ) {
window_width = window.innerWidth;
window_height = window.innerHeight;
} else if( document.documentElement &&
( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
window_width = document.documentElement.clientWidth;
window_height = document.documentElement.clientHeight;
} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
window_width = document.body.clientWidth;
window_height = document.body.clientHeight;
}
}
var left = Math.round((window_width - 200) / 2);
var top = Math.round(((window_height - 46) / 3) + 46);
document.getElementById('pageIsLoading').style.lef t = left+'px';
document.getElementById('pageIsLoading').style.top = top+'px';
</script>
Chargement... Veuillez patientez...
</div>
</html>

Mais rien ne se passe aucune animation...

Que dois-je faire ,

[lesoutier]

Re : Barre de pourcentage pendant 3 secondes sur le site...

Renoncer, je crois que c'est clair ?

[jisse03]

Re : Barre de pourcentage pendant 3 secondes sur le site...

Renoncer, je crois que c'est clair ?

Ou apprendre vraiment la logique Joomla!, les normes d'accessibilité au lieu de publier un fatras JavaScript en vrac.

A moins qu'il finisse par trouver un développeur qui aime aussi ces gadgets inutiles (et souvent nocifs par rapport aux normes d'accessibilité) qui veuille bien lui développer ce genre de machin