Les propriétés de l'image font-elles partie du DOM (incompatibilité jQuery - webkit avec d'autres navigateurs)?

Question

J'ai rencontré un problème sur Chrome et Safari en utilisant jQuery pour faire des calculs en utilisant les largeurs d'une bande d'images.

Lorsque vous utilisez mes calculs:

$(document).ready(function() { 
    /* some calculations with $("img").width() */ 
}); 

tout fonctionne très bien dans IE6 + et Firefox, mais il ne fonctionne pas dans Chrome et Safari: $ (img) .width() est 0 si l'image est déjà mis en cache ou non.

utilisant:

$(window).load(function() { 
    /* some calculations with $("img").width() */ 
}); 

cela fonctionne dans tous les navigateurs mentionnés ci-dessus, mais le problème est-il que commence lorsque toutes les images sont complètement chargées.

Le comportement de la webkit est-il le comportement attendu ou y a-t-il un bogue webkit/jQuery qui fait que les propriétés de l'image ne font pas partie du DOM?

En cas de problème avec webkit/jQuery: Y a-t-il un moyen de contourner ce problème pour permettre à mon script de s'exécuter plus tôt que dans la solution mentionnée ci-dessus? Par ailleurs, je n'utilise aucune propriété en ligne pour les dimensions de l'image. Par contre, je n'utilise aucune propriété en ligne.

Answer 1

Essayez spécifiant les tailles dans vos balises img:

<img src="myimg.jpg" alt="" width="300" height="200" /> 

Une recherche rapide Google à ce sujet: http://www.websiteoptimization.com/speed/tweak/size/

Ce que je suis déduisant est puisque les images ne sont pas chargées, WebKit sera tout simplement renvoie 0 en tant que taille 'inconnue' jusqu'à ce que l'image ait été chargée. Spécifiquement indiquant la taille pourrait résoudre cela.

Answer 2

je me sens ce qui est plus de façon hack-ish, mais il semble fonctionner (ce que je l'ai testé):

function callback(){ 
    var el = $(this); 
    // if this element was processed or width is 0 (for webkit), then skip 
    if(el.data('loaded') || el.width() === 0) 
     return; 
    el.data('loaded', 1); // marked this element as "processed" 
    // do whatever you want to do with el.width() 
    console.log(el.width()); 
} 
$(function(){ 
    // Non-webkit-based browsers will call callback() here 
    // otherwise, after each image loads, the callback will execute 
    // (for webkit browsers), when the size will be correct. 
    $('img').load(callback).each(callback); 
}) 

WebKit navigateurs encore un peu plus lent que les autres navigateurs, car il est après chaque image est fini en chargement, mais c'est plus rapide que d'attendre all les images à charger.

Answer 3

Je ne suis pas un fan des tâches de déchargement au client qui devraient être traitées sur le serveur.

La vraie solution consiste à calculer la taille de l'image lorsqu'elle est ajoutée à votre base de données, puis de générer correctement la balise <img> avec les attributs width et height avant de l'envoyer au client. Tout frais supplémentaire encouru dans le calcul initial (et tirant les valeurs de la base de données par la suite) serait minuscule par rapport au processus de téléchargement dans la base de données en premier lieu - sans parler de chaque récupération ultérieure de celui-ci plus tard.

Le résultat est une balise HTML sémantiquement significative qui fonctionne avec jQuery dans tous les navigateurs qui vous intéressent, alors pourquoi l'éviter?

Answer 4

J'ai trouvé cette façon de spécifier les tailles d'image lors du chargement dynamique d'images en utilisant.charge(), j'utilise une fonction de chargement de l'image avec une fonction de rappel

loadImage: function(src, callback){ 
    $("<img alt="" />").attr("src", src).load(callback); 
} 

puis je peux utiliser le img-élément (ce qui indique la taille correcte) pour régler les img-attributs à l'intérieur de la fonction de rappel

$(this).attr({ 
    id: img, 
    width: this.width, 
    height: this.height 
}); 

et maintenant je peux obtenir la bonne hauteur à l'aide et Largeur, par exemple,

var contentWidth = $("#img").attr("width");