Delf a écrit :
> HTmeuleu :
> ----------
>
> <script language="javascript" type="text/javascript"
> src="scripts/ajax.top-loader.js"></script>
>
> ....
>
> <div id="topLoader" style="top:0; right:0; background-color:#CF4342;
> color:#fff; position:fixed; display:none">
> <table border="0">
> <tr>
> <td>&nbsp;<img src="images/top-loader.gif" alt="Loading..." /></td>
> <td valign="middle">&nbsp;Loading...&nbsp;</td>
> </tr>
> </table>
> </div>
>
> Javascript :
> ------------
>
> var jsTopLoaderAjax =
> {
> blockDiv : null,
>
> showLoader : function()
> {
> jsTopLoaderAjax.showBlockDiv();
>
> var handle = document.getElementById('topLoader');
>
> handle.style.display = 'block';
> },
>
> hideLoader : function()
> {
> var handle = document.getElementById('topLoader');
>
> handle.style.display = 'none';
>
> jsTopLoaderAjax.hideBlockDiv();
> },
>
> showBlockDiv : function()
> {
> blockDiv = document.createElement('blockDiv');
>
> blockDiv.onclick = function()
> {
> return false;
> };
>
> blockDiv.style.opacity = 0.15;
> blockDiv.style.khtmlOpacity = '0.15';
> blockDiv.style.mozOpacity = '0.15';
> blockDiv.style.filter = 'alpha(opacity = 15)';
>
> blockDiv.style.backgroundColor = 'black';
> blockDiv.style.position = 'absolute';
> blockDiv.style.top = '0px';
> blockDiv.style.left = '0px';
> blockDiv.style.width = '100%';
> blockDiv.style.zIndex = 1e6;
>
> var pageInfo = jsTopLoaderAjax.getPageInfo();
>
> blockDiv.style.height = pageInfo[0] + 'px';
>
> document.body.appendChild(blockDiv);
> },
>
> hideBlockDiv : function()
> {
> blockDiv.style.display = 'none';
>
> document.body.removeChild(blockDiv);
>
> blockDiv = null;
> },
>
> getPageInfo : function()
> {
> var xScroll, yScroll;

Manque plusieurs variables non déclarées qui polluent le scope global.
Plus les deux variables (windowWidth et windowHeight) déclarées en plein
milieu de la fonction, c'est pas très très propre A défaut de
propreté du code (somme toute relative dès qu'on parle javascript), j'ai
pris l'habitude, et je pense sincèrement que c'est une bonne habitude,
de déclarer absolument *toutes* mes variables en début de block, ça
évite les surprises des variables qui ne sont pas dans le bon scope
d'éxécution.

var
xScroll, yScroll,
pageWidth, pageHeight,
windowWidth, windowHeight;

[cut]

> arrayPageSize = new Array(pageHeight, pageWidth,
> windowHeight, windowWidth);
> return arrayPageSize;

autant retourner directement le tableau sans créer de variable
intermédiaire, d'autant qu'on vient de voir qu'elle polluait

return [pageHeight, pageWidth, windowHeight, windowWidth];

> }
> }
>
> Par contre, on voit le DIV noir avant que la transparence lui soit
> appliqué... c'est possible de faire qqchose ?

Peut être à cause du
blockDiv = document.createElement('blockDiv');

parce que ça existe pas l'élément HTML <blockDiv>

Toujours sur blockDiv (mais la variable JS cette fois), elle est
déclarée dans l'objet jsTopLoaderAjax (jsTopLoaderAjax.blockDiv) hors en
faisant

blockDiv = docu.....;

ça va créer une variable globale - puisque pas de var devant - au lieu
d'utiliser la propriété de l'objet (désolé pour le vocabulaire, ca
s'appelle peut être pas une propriété, désolé les puristes)

Donc faudrait faire :
jsTopLoaderAjax.blockDiv = docu....;

Comme ça, pas de pollution du scope global.

Sinon, je vois que "showLoader" et "hideLoader" font toutes les deux
appels en permanence au même D::gEBI('topLoader'); Peut être (j'en sais
rien) serait-il préférable de garder une référence une fois trouvée au
lieu d'aller la rechercher à chaque fois.

Pareil (ou presque) pour "showBlockDiv" et "hideBlockDiv" dans l'un
(showBlockDiv) l'élément "blockDiv" n'arrete pas de se récréer et dans
l'autre il arrête pas d'être nullifier. Peut être (encore une fois j'en
sais rien) serait-il toujours préférable de garder la référence une fois
crée et l'insérée/supprimée au besoin.

Et BTW, pourquoi avoir créé les fonctions "showBlockDiv" et
"hideBlockDiv" ? Elle semblent faire doublon (au vu du nommage et du
code) en ayant un rôle complètement similaire à "showLoader" et
"hideLoader". J'aurais tendance à ne pas séparer des fonctions
interdépendantes.

var jsTopLoaderAjax = function()
{
// variable privée
var
handle,
// pour ceux que ça intéresse,
// même si c'est pas indispensable
// de faire comme ça
// "javascript lazy pattern"
getBlockDiv = function()
{
var div = document.createElement('div');
div.onclick = function() { return false; };
div.style..... // sauf le style.height
getBlockDiv = function() { return div; };
return getBlockDiv();
};
// function privée
function getPageInfo()
{
// copié/collé de la méthode originale
// si elle convient
}
// interface publique
return {
show:function()
{
var div = getBlockDiv();
handle = handle || document.getElementById('topLoader');
div.style.height = getPageInfo()[0] + 'px';
document.body.appendChild(div);
handle.style.display = 'block';
},
hide:function()
{
if ( !handle ) { return ; }
handle.style.display = 'none';
document.body.removeChild(getBlockDiv());
}
};
}(); // auto invocation de la fonction

--
laurent