Mon objectif de base est d'avoir une boîte noire avec une image (préparée par javascript) chargée à l'intérieur. Je veux que l'image et la boîte soient réactives (qu'elles s'adaptent correctement à toutes les résolutions), mais je veux que la plus grande largeur de l'image soit d'une certaine taille. Pour l'instant, voici mon code :
<html>
<head>
<style>
#mybox{
background: #000;
padding: 10px;
}
#picturesettings{
max-width: 365px;
width: 100%;
height: auto;
}
</style>
</head>
<body>
<div id="mybox">
<div id="mypicture">
</div>
</div>
<script>
var mypicture=document.getElementById('mypicture');
var newpicture=document.createElement('IMG');
newpicture.id="picturesettings";
newpicture.alt="new picture";
newpicture.src="/path/to/image.jpg";
mypicture.appendChild(newpicture);
</script>
</body>
</html>Mon objectif est atteint sauf que l'image se charge après tout le reste, ce qui déclenchera un problème de "priorité au contenu visible" dans Google Page Speed Insights car la boîte extérieure devra être redimensionnée une fois que l'image sera chargée.
Existe-t-il un moyen de charger l'image de manière à ce que le dimensionnement initial de la boîte extérieure ne doive être effectué qu'une seule fois au lieu de deux ?
Consultez cette URL si vous voulez voir la question de la "priorité au contenu visible".
Il s'agit de mon site web dans lequel la taille de la boîte dépend de la taille de l'image.
Je pense que la seule solution est de faire en sorte que la hauteur de la boîte noire soit la hauteur maximale afin que la photo s'insère bien à l'intérieur quelle que soit sa taille, mais le problème avec cette mise en œuvre est que les utilisateurs d'appareils avec de très petites largeurs d'écran verront l'image à une taille décente, mais ils verront un tas d'espace noir qu'ils devront faire défiler pour atteindre le texte, ce qui est également ce que je ne veux pas.
Y a-t-il un moyen de résoudre ce problème ?
