Problème de chargement de l'image HTML

Question

J'ai un site où je dois charger dynamiquement des images. Je dois connaître leur largeur/hauteur avant de les déposer, donc j'utilise le gestionnaire d'événement onload. Ce que j'ai trouvé de toute façon, c'est que parfois ces valeurs sont 0/0 même dans le gestionnaire (cela arrive sur Chrome et comme je cible webkit, c'est le navigateur à utiliser). Y a-t-il un moyen de faire respecter cela? Je veux dire que je pourrais utiliser certaines choses comme un setTimeout dans le cas où l'image est 0/0 et revérifier jusqu'à ce qu'il soit fait, ce que je cherche est quelque chose de plus propre et éventuellement utilisant des méthodes DOM ...

Answer 1

Vous utilisez l'événement onload de l'image correctement? Si ce n'est pas fiable, j'essaierais d'écrire l'image dans le DOM dans un élément caché, puis d'obtenir ses dimensions.

Answer 2

est l'onload événement dans la tête de votre page? J'avais devant quelques problèmes quand il se le tient dans la tête.

Vous pouvez également mettre votre javascript avant la fin du corps. Dans ce cas, vous n'avez pas besoin de l'événement onload.

Answer 3

Je ne suis pas entièrement sûr de ce que vous voulez réaliser. La seule raison pour laquelle je peux imaginer pourquoi vous auriez besoin de la largeur et de la hauteur de l'image est si vous ne voulez pas voulez mettre à l'échelle l'image. Cela semble peu probable car cela ne permettrait pas d'avoir une mise en page propre de votre page.

Si vous voulez simplement conserver le rapport d'aspect, définissez les images à une certaine hauteur, puis laisser la hauteur sur l'auto (par exemple dans une classe CSS):

.myImg { 
    /* ... */ 
    width: 150px ; 
    height: auto ; 
    /* ... */ 
} 

De cette façon, vous aurez une mise en page propre préservation le format de vos images sans avoir à utiliser de scripts pour modifier leur largeur et leur hauteur. Les images au format HTML conservent le rapport d'aspect par défaut.

HTH