Obtenez href, src, largeur, hauteur de l'image en utilisant jQuery

Question

Je veux obtenir le href, src, largeur, hauteur de toutes les images sur une page. Le code jQuery est

$('img:regex(data:extension, jpg)').each(function() { 


var imgsrc = $(this).attr('href'); 

//$(this).attr('width') =0;          

var newImg = new Image(); 
newImg.src = imgsrc;  
var width = newImg.width; 
//width is 0; 


}); 

Vous ne savez pas quel est le problème, des idées?

Merci Jean

Answer 1

bien balises IMG utilisent 'src' non 'href'.

Answer 2

$('img').each(function() { 
    var imgwidth = $(this)[0].offsetWidth; 
    var imgheight = $(this)[0].offsetHeight; 
    console.log(imgwidth ,' X ' , imgheight); 
}); 

Je pense que cela devrait aider

Answer 3

Je ne serais pas surpris si cela ne fonctionne pas - du moins, pas jusqu'à ce que le document et toutes ses ressources sont complètement chargées. HTML ne spécifie normalement pas la largeur ou la hauteur d'une image à moins qu'elle n'ait été spécifiée dans l'étiquette elle-même.

Vous devrez donc au moins attendre l'événement onload.

L'autre solution, qui pourrait s'avérer un peu pénible, est de vérifier la largeur/hauteur de l'image du côté serveur et de fournir dans les attributs < img width, height>.

Answer 4

En supposant que vous avez ce balisage:

<a href="link1"><img src="foo.jpg"></a> 
<a href="link2"><img src="bar.jpg"></a> 

Vous pouvez obtenir le lien d'emballage par jQuery.closest() comme suit:

$('img[src$=.jpg]').each(function() { 
    $img = $(this); 
    $link = $img.closest('a'); 
    var href = $link.attr('href'); 
    // ... 

    // Assuming you want the image's client width/height: 
    var width = $img.width(); 
    var height = $img.height(); 
    // ... 
}); 

Le [name$=value] est par la façon dont le attribute-ends-with selector.

Answer 5

En ce qui concerne la réponse ci-dessus de Rei ... c'est correct, vous voulez vraiment être sûr que tout est complètement chargé avant de commencer à saisir des dimensions. Un outil utile pour cela est jquery.imagesloaded.

Answer 6

Cet exemple fonctionne pour votre problème.

$("img").each(function(){ 
    alert($(this).attr('src') + " - " + $(this).attr('width') + " - " + $(this).attr('height')); 
});