Exemple de code JavaScript pour obtenir la taille réelle des compétences picture_javascript

Les tailles d'image sur les pages Web semblent toutes identiques. Dans les pages d'articles que nous voyons le plus souvent avec plusieurs images, la taille des images est généralement la même que la largeur de la page. De cette façon, la page ressemble à un cylindre droit. Si vous voyez trop cette mise en page, elle le fera. se sentir très monotone. La raison de cette situation, je pense, est en grande partie due aux limitations des anciens navigateurs. Cependant, avec la popularité des navigateurs modernes (Firefox/Google/IE11), les navigateurs ont de moins en moins de restrictions sur la conception des pages, et l'imagination des programmeurs Web peut être grandement utilisée.

Par exemple, un anecdote : savez-vous d'où vient le [x] dans chaque fenêtre ? Dans cet article, de nombreuses images dépassent la limite de largeur du texte, donnant aux gens une impression d'inégalité. Dans le même temps, permettre aux grandes images d'être affichées dans leur taille réelle donne aux gens une sensation plus choquante.

Mais techniquement, nous pouvons facilement limiter les images par la largeur maximale du texte, afin qu'elles conservent toutes la même largeur. Au lieu d'appuyer sur la largeur du texte, nous avons besoin que chaque image ait sa propre taille. Nous pouvons déclarer la taille originale de l'image lors de l'édition côté serveur. Un moyen plus flexible consiste à obtenir dynamiquement la taille d'origine de l'image en plaçant un morceau de js sur la page et à modifier dynamiquement la taille d'affichage de l'image. Ceci est non seulement compatible avec l'ancienne méthode de maximisation de la largeur du texte, mais permet également aux images d'afficher leur taille d'origine en cas de besoin.

Comment obtenir la taille originale de l'image côté navigateur en utilisant JavaScript ?

Copier le code Le code est le suivant :

var img = $("#img_id"); // Récupérer mon élément img
var pic_real_width, pic_real_height;
$("") // Créer une copie en mémoire de l'image pour éviter les problèmes CSS
.attr("src", $(img).attr("src"))
.load(fonction() {
pic_real_width = this.width; // Remarque : $(this).width() ne le fera pas
pic_real_height = this.height; // fonctionne pour les images en mémoire.
});

Les navigateurs Webkit (Google Chrome, etc.) ne peuvent obtenir les valeurs de hauteur et de largeur qu'après l'événement chargé de l'image. Par conséquent, vous ne pouvez pas utiliser la fonction timeout pour retarder l'attente. Le meilleur moyen est d'utiliser l'événement onload de l'image.

Afin d'éviter l'impact du CSS sur la taille de l'image, le code ci-dessus copie l'image en mémoire pour le calcul.

Si votre page est une page ancienne, vous pouvez intégrer ce code en bas de la page selon vos besoins. Cela ne vous oblige pas à modifier la page d'origine.