J'ai utilisé jquery's offset(). Top, mais en l'exécutant 4000 fois dans une boucle, les navigateurs se fige pendant quelques secondes. Y a-t-il un moyen plus rapide d'obtenir ceci?moyen le plus rapide pour trouver la position d'un élément en utilisant javascript?
Cela se passe sur l'iPAD, le bureau est plus rapide.
for (counter=1; counter<4000; counter++)
{
yPos = Math.round($("#star_"+counter).offset().top);
.offset().top retourne toujours un entier, donc il est inutile d'arrondi. De plus, vous pouvez mettre en cache l'objet jQuery pour l'efficacité:
$box = $('#box');
// start your loop here
yPos = $box.offset().top;
// end loop
MISE À JOUR
attribuer une classe à chaque étoile de sorte que vous ne devez pas continuer à créer de nouveaux objets jQuery:
$('.stars').each(function(i,el) {
var yPos = this.offsetTop;
});
https://developer.mozilla.org/en-US/docs/DOM/element.scrollTop
Il pourrait également mettre en cache yPos. Nous ne pouvons pas le dire parce qu'il a posté une seule ligne de code. –
Désolé de ne poster qu'une seule ligne de code. Je boucle à travers les étoiles en utilisant $ ("# star" + compteur). dans une boucle for. La boîte est le conteneur div des étoiles. Cela aurait dû être plus clair. –
Vous pouvez également pas utiliser jQuery ...
var element = document.getElementById("box");
var top = element.offsetTop;
while (element.parentNode) {
element = element.parentNode;
top += element.offsetTop;
}
console.log(top);
jQuery fait un peu de travail supplémentaire obtenir la div, que pur javascript. Donc, si la vitesse est un problème ici, vous devez utiliser le javascript pur.
Mais si ce sont des étoiles dans un ciel que vous pouvez simplement utiliser offsetTop et assurez-vous qu'ils sont contenus dans un div qui remplit tout l'écran:
document.getElementById("box").offsetTop;
Mais je pense aussi que vous faites une sorte de calcul pour mettre les étoiles là en premier lieu. Vous devriez créer un tableau des étoiles, référençant les divs. Quelque chose comme:
var stars = [];
for (var x = 0; x < 4000; x++) {
var star = document.createElement("DIV");
var position = setStarPosition(star);
stars.push({
star: star,
position: position
});
document.body.appendChild(star);
}
function setStarPosition(star) {
// Some positioning code which stores left and top position in variables
return {
left: left,
top: top
}
}
Lorsque vous voulez manipuler les étoiles que vous allez à travers le réseau, qui a la position et une référence à la div.
Référencer les divs dans l'environnement javascript (par exemple dans un tableau) est beaucoup plus rapide que de les référencer dans le DOM.
Vous pouvez également vérifier isNaN (element.offsetTop) dans la boucle while –
Au lieu de cela:
for (counter=1; counter<4000; counter++) {
yPos = Math.round($("#star_"+counter).offset().top);
// etc
}
affecter une classe à tous les étoiles (nous allons l'appeler class = "étoilé") et faire ceci:
var cacheStars = $(".starry");
Cela n'a jamais besoin de mettre à jour, sauf si vous ajoutez ou supprimer les étoiles, auquel cas vous pouvez le rafraîchir. Alors votre boucle devient:
cacheStars.each(function(index, element) {
ypos = element.offsetTop;
});
_4000 times_? Pourquoi? – undefined
Veuillez publier un exemple de code plus complet. Les conseils que je pourrais vous donner pourraient inclure la mise en cache de la valeur, mais je ne peux pas dire si cela est approprié avec cette seule ligne. –
Un navigateur peut uniquement exécuter les instructions javascript une par une. Ensuite, si vous avez une boucle, alors que le navigateur exécute cette boucle, il n'exécute rien d'autre à ce moment-là. Donc 'Math.round ($ (" # case "). Offset(). Top)' ne changera pas pendant la boucle, donc vous n'avez pas besoin de le vérifier 4000 fois. – Oriol