La dimension de l'image est différente de celle où son chargement et après le chargement

J'ai une page qui charge un grand nombre d'images assez grandes (environ 200 images 100Kb [environ 600 x 400 px]).La dimension de l'image est différente de celle où son chargement et après le chargement

Ce que je suis en train de faire est de manipuler la photo si elle est en mode portrait, par opposition au paysage. Le problème que j'éprouve est que lorsque j'utilise javascript pour saisir les propriétés d'une photo de portrait lors du chargement, la hauteur est significativement inférieure à ce qu'elle devrait être, et la largeur est plus grande qu'elle ne devrait l'être. Plus précisément, une image de 75 x 100 a été considérée comme une image de 100 x 16. Ainsi, lorsque la fonction traverse cette image, l'image est considérée comme paysage, pas portrait, et saute par-dessus.

J'ai eu du mal à identifier le problème, parce que la propriété il montre comme une image 75 x 100px après on fait le chargement.

est-il un moyen de contourner ce problème? ou exécutez la fonction après que toutes les images ont été chargées?

Source

2010-09-26 j Ko

toujours une bonne idée de courir après javascript les éléments de la page ont fini de charger. Je fais habituellement ceci dans jQuery, comme ceci:

$(function(){ 
    //code to run after load goes here 
});

Sinon, vous pouvez essayer de modifier la balise body et en lui donnant un attribut onload, comme:

<body onload="myFunction();" >

Source

2010-09-26 05:06:07

Exécutez la fonction après qu'il a chargé, tu ferais comme ça:

Utilisation du DOM exclusivement

var newImg = document.createElement('img'); 
newImg.src = "theImage.png"; 
newImg.alt = "Always specify an alternate text for accessibility, even if left blank"; 
newImg.onload = function() { 
    //Image manipulation 
}; 
galleryNode.appendChild(newImg); //Replace galleryNode with the parent element of your image.

En utilisant innerHTML

galleryNode.innerHTML += "<img src='theImage.png' alt='' id='newImage1'/>"; 
var newImg = document.getElementById('newImage1'); 
newImg.onload = function() { 
    //Image manipulation 
};

En utilisant jQuery

$('.gallery img').live('load',function() { 
    //Image manipulation 
});

Source

2010-09-26 05:08:08

La dimension de l'image est différente de celle où son chargement et après le chargement

Répondre

Questions connexes