Comment puis-je obtenir de manière fiable les dimensions d'une image d'arrière-plan à l'aide de jQuery ?

Détermination des dimensions de l'image d'arrière-plan dans jQuery

La tâche de récupérer les dimensions (largeur et hauteur) de l'image d'arrière-plan d'un div à l'aide de jQuery peut sembler simple, mais cela présente certains défis.

Au départ, les tentatives d'utilisation jQuery('#myDiv').css('background-image').height() peut entraîner un message d'erreur indiquant qu'il ne s'agit pas d'une fonction. Pour surmonter ce problème, nous explorons des approches alternatives.

Une solution consiste à extraire l'URL de l'image du style d'image d'arrière-plan et à créer un objet Image pour charger l'image. Lorsque l'image se charge avec succès, nous pouvons accéder à ses propriétés de largeur et de hauteur pour obtenir les dimensions souhaitées. Cependant, cette méthode nécessite une manipulation du DOM et peut être sensible à certains caractères du nom du fichier image.

Pour résoudre ces problèmes, nous proposons une solution améliorée qui encapsule le code dans une fonction appelée getBackgroundImageSize. Cette fonction utilise l'objet différé de jQuery pour gérer le chargement d'images asynchrone et assure la gestion des erreurs. De plus, il utilise une expression régulière plus robuste pour correspondre à différents formats d'URL, garantissant ainsi la compatibilité avec différents navigateurs et versions de jQuery.

L'utilisation de getBackgroundImageSize est simple. Fournissez simplement l'élément jQuery comme argument et il renverra une promesse. Si l'image est chargée avec succès, la promesse sera résolue avec un objet contenant la largeur et la hauteur de l'image d'arrière-plan. Sinon, la promesse sera rejetée.

Cette solution mise à jour offre une approche plus complète et plus fiable pour déterminer les dimensions de l'image d'arrière-plan d'un div à l'aide de jQuery.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!