Bonjour à tous,
je suis nouveau sur le forum, même si je le suis activement depuis plusieurs années maintenant
Je suis développeur frontend et pourtant, une question me turlupine : Le poid des images.
Afin d'optimiser le poid d'une page, est il préférable d'utiliser css ou la balise img ?
Merci pour vos lumières.
Edit : ce post est en train de prendre une nouvelle tournure puisque mon animation connait des pertes de performances et je pense que ce n'est pas spécifiquement lié au poid des images en réalité..
Voici le lien de démo : http://desirelabs.fr/desirelabs
et le code source :
Modifié par neovea (29 Mar 2013 - 13:18)
je suis nouveau sur le forum, même si je le suis activement depuis plusieurs années maintenant
Je suis développeur frontend et pourtant, une question me turlupine : Le poid des images.
Afin d'optimiser le poid d'une page, est il préférable d'utiliser css ou la balise img ?
Merci pour vos lumières.
Edit : ce post est en train de prendre une nouvelle tournure puisque mon animation connait des pertes de performances et je pense que ce n'est pas spécifiquement lié au poid des images en réalité..
Voici le lien de démo : http://desirelabs.fr/desirelabs
et le code source :
/* Script de génération d'images, animation, suppression */
var i = 0;
var screenWidth = parseInt($('body').innerWidth());
function generate(){
do{ var haut = Math.floor(Math.random()*1000) } while(haut <= 5 || haut >= 75);
do{ var largeur = Math.floor(Math.random()*1000) } while(largeur <= 50 || largeur >= 120);
var frequence = 3000*Math.floor(Math.random()*10);
var hauteur = (largeur/1.923);
var opacite = 1;
if(i <= 5){
var speed = 700;
do{ var gauche = Math.floor(Math.random()*1000) } while(gauche <= 5 || gauche >= screenWidth);
}
else{
var speed = 1;
var gauche = -75;
}
document.getElementById('space').innerHTML += '<div class="nuage nuage_'+i+'"></div>';
$('#space .nuage_'+i).animate({opacity : opacite},speed);
$('#space .nuage_'+i).css("top", haut);
$('#space .nuage_'+i).css("left", gauche);
$('#space .nuage_'+i).css("width", largeur);
$('#space .nuage_'+i).css("height", hauteur);
i++;
setTimeout("generate()",frequence);
}
function del(){
$('#space .nuage').each(function(){
if($(this).css("left").substr(0,4) >= screenWidth){
$(this).remove();
}
});
setTimeout("del()",1000);
}
function move(){
$('#space .nuage').each(function(){
if($(this).css("width").length == 5){
var coef = parseInt($(this).css("width").substr(0,3));
}
else{
var coef = parseInt($(this).css("width").substr(0,2));
}
var index = Math.floor(1/coef*1000);
var speed = coef*1500;
$(this).css("z-index", speed);
$(this).innerHTML = speed;
$(this).animate({left : 2000}, speed, "linear");
})
setTimeout("move()",10);
}
$(document).ready(function(){
del();
generate();
move();
});Modifié par neovea (29 Mar 2013 - 13:18)
) Avec ton lien j'ai économisé près de 30ko.