J'ai un navigateur web C# qui contient une page html avec plusieurs iframes. Chaque iframe contient un fichier html arbitraire, souvent avec des images. Les balises img n'ont souvent aucun attribut de largeur ou de hauteur (c'est-à-dire souvent <img src="someimage.jpg">).dimensionnement correct d'un iframe contenant des images de dimensions inconnues
J'ai lu sur la façon de dimensionner les iframes en fonction de leur contenu, et je l'ai fait fonctionner avec jquery. L'extrait jquery suivant est présent dans le code HTML du iframe:
$(document).ready(function() {
$('img').each(function(){
$(this)
.bind('load readystatechange', function(e) {
var iframes = window.top.document.getElementsByName(window.name);
if (iframes.length == 1) {
window.top.DoResizeFrame(iframes[0]);
}
})
});
DoResizeFrame est défini dans le fichier HTML parent (celui que le navigateur Web montre):
function DoResizeFrame(fr) {
if (fr && fr.Document && fr.Document.body) {
fr.style.height = fr.Document.body.scrollHeight + 'px';
fr.style.width = fr.Document.body.scrollWidth + 'px';
}
}
Je demande aussi DoResizeFrame du parent événement $ (document) .ready du document. Cela fonctionne très bien - s'il n'y a pas d'images, l'événement prêt du document déclenche un redimensionnement. S'il y a des images, chaque fois qu'une image est chargée, l'iframe est correctement redimensionnée. Toutefois, le chargement d'une image volumineuse entraîne une taille incorrecte de l'iFrame jusqu'à ce que l'image soit complètement chargée. Comme j'ai rarement les attributs de largeur et de hauteur dans la balise d'image, j'ai pensé que je pourrais utiliser jquery pour écouter l'événement readystatechange de l'image, et quand il est en "chargement", ramasser la taille de l'image et la dimensionner l'iframe même pendant le chargement de l'image. Malheureusement, au moins dans IE7, readystatechange = le chargement ne se produit qu'une fois l'image téléchargée.
Est-ce que quelqu'un a des idées sur comment je peux détecter la taille d'une image référencée dans mon code HTML simplement par "<img src="someimage.jpg">" sans attendre que le téléchargement entier se produise? J'essaie de fournir la meilleure expérience utilisateur en dimensionnant tout correctement, afin que l'utilisateur puisse lire le reste de l'iframe, même si une grande image prend du temps à télécharger.
merci! jean