Problème de transparence png sur une page web - ça rame :-
Publié : 28 nov. 2005, 20:03
Bonjour à tous,
J'ai réalisé des pages webs composées en grande partie de png transparent.
J'utilise pour celà le script suivant:
et je rajoute dans la balise table du tableau souhaité: id=post.
Ceci a pour effet de rendre le fond du tableau en question transparent, si l'image de fond est un png intégrant le cannal alpha. Ce système est trés pratique car compatible avec Internet Explorer et surtout Firefox. Voici le problème: sous firefox, lorsque je met le script, le site rame incroyablement. Lorsque l'on fait défilé une page, le navigateur rame à mort (pour les pc peu puissant). Ce n'est pas le cas sous IE. Si vous voulez voir ce que donne ce massacre voici l'URL de mon site => http://www.talbarts.info. Notez que je n'ai pas ce problème lorsque je ne met pas ce script. Bref, quelqu'un aurai til une solution pour paré à ce problème handicapant ?
J'ai réalisé des pages webs composées en grande partie de png transparent.
J'utilise pour celà le script suivant:
Code : Tout sélectionner
function correctPNG() // correctly handle PNG transparency in Win IE 5.5 or higher.
{
for(var i=0; i<document.images.length; i++)
{
var img = document.images[i]
var imgName = img.src.toUpperCase()
if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
{
var siz="image";
if(img.src=="degrade.png" || img.src=="http://talbarts.info/degrade.png"){
siz= "image";
}
var imgID = (img.id) ? "id='" + img.id + "' " : ""
var imgClass = (img.className) ? "class='" + img.className + "' " : ""
var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
var imgStyle = "display:inline-block;" + img.style.cssText
if (img.align == "left") imgStyle = "float:left;" + imgStyle
if (img.align == "right") imgStyle = "float:right;" + imgStyle
if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
var strNewHTML = "<span " + imgID + imgClass + imgTitle
+ " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
+ "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
+ "(src=\'" + img.src + "\', sizingMethod='"+siz+"');\"></span>"
img.outerHTML = strNewHTML
i = i-1
}
}
// Les arrières plan
// is the browser competent with the DOM?
if(document.getElementById) {
// is the browser capable of managing runtimeStyle?
while(bk = document.getElementById("post")){
if(bk.runtimeStyle) {
// delete current background
ar=bk.background;
bk.style.backgroundImage = 'none';
// apply PNG background with alpha transparency filtering
bk.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" +ar+"',sizingMethod='scale')";
bk.id="png_ar_tr";
} //if
} //while
} //if
}
window.attachEvent("onload", correctPNG);
</script>
Ceci a pour effet de rendre le fond du tableau en question transparent, si l'image de fond est un png intégrant le cannal alpha. Ce système est trés pratique car compatible avec Internet Explorer et surtout Firefox. Voici le problème: sous firefox, lorsque je met le script, le site rame incroyablement. Lorsque l'on fait défilé une page, le navigateur rame à mort (pour les pc peu puissant). Ce n'est pas le cas sous IE. Si vous voulez voir ce que donne ce massacre voici l'URL de mon site => http://www.talbarts.info. Notez que je n'ai pas ce problème lorsque je ne met pas ce script. Bref, quelqu'un aurai til une solution pour paré à ce problème handicapant ?
