J'ai créé une application angulaire 7 et utilisée l'observateur d'intersection d'une charge paresseux certains éléments. Cela fonctionne comme une brise en chrome, mozilla et même bord. Mais dans IE11, lorsque le chargement paresseux démarre et l'intersection Observer commence, l'application gèle. J'ai ajouté l'importation 'Intersection-Observateur' dans Polyfills pour soutenir IE11. Je suis confondu avec ce comportement.
p>
intersectionObserverForTableRow() {
const selectedNodeLists = document.getElementsByClassName('tableDataRow');
const tableIntersectionObserver = new IntersectionObserver((entries, tableIntersectionObserver) => {
entries.forEach((entry) => {
if (!this.hasNextPage) {
this.showShimmerRows = false;
tableIntersectionObserver.disconnect();
}
if (entry.isIntersecting) {
const el = entry.target;
// console.log(el.id, ('lazyLoadedObserver' + (this.currentTableContent.length - 1)))
if (el.id === ('lazyLoadedObserver' + (this.currentTableContent.length - 1))) {
// console.log('inside');
// this.currentTableContent = this.currentTableContent.concat(this.setDummyDataForTableRowShimmer());
this.setDummyDataForTableRowShimmer();
this.pageNumber++;
this.loadNextSetOfData.emit(this.pageNumber);
// console.log(this.currentTableContent)
// setTimeout(() => {
// this.triggerObserver(selectedNodeLists, tableIntersectionObserver)
// }, 10);
tableIntersectionObserver.unobserve(entry.target);
}
}
});
});
this.triggerObserver(selectedNodeLists, tableIntersectionObserver);
}3 Réponses :
vérifier le fichier Essayez de faire comme ça p> Vous pouvez l'installer via NPM
polyfill.ts code> Déterminez tout le code pour IE. NPM INSTALLATION INTERSECTION-OBSERVER CODE> ET P> import into polyfills.ts as import 'intersection-observer';
Dans Pollyfills.ts, il n'y a que «Classlist.js» commenté et Zone.js, qui est déjà non motivé.
Essayez la solution ci-dessus
Je l'ai déjà fait cela, donc cela fonctionnera sur c'est-à-dire, mais gèle sur Scroll Thats, lorsque l'observateur d'intersection commence à fonctionner.
the L'observateur d'intersection ne prend pas en charge le navigateur IE , si vous souhaitez l'utiliser dans le navigateur IE, nous devons ajouter de la polyfill pour cela.
Essayez d'installer la polyfill via NPM: P>
<script src="https://polyfill.io/v3/polyfill.min.js?features=IntersectionObserver"></script>
Lorsque j'ai ajouté intersection-Observateur-polyfill sur Polyfill.ts, c'est-à-dire une erreur de syntaxe sur Polyfills.js et Main.js, si je le supprimais et ajoute l'intersection-observateur à des polyfill.ts, c'est-à-dire des charges, mais gèle sur l'appel d'intersection Observer c'est-à-dire lors du défilement qui est lorsque des rangées sont paresseuses chargées.
Lorsque vous gelez, avez-vous déjà essayé d'utiliser des outils réseau de développeurs F12 pour vérifier la demande, qu'il s'agisse de succès? Existe-t-il une erreur lorsque vous l'avez débogué à l'aide d'outils de développeur F12?
Ouais, j'essaie d'ouvrir des outils de développement, cela ne montre aucune erreur, mais l'explorateur Internet se fige ensuite et devient ne répondant pas.
J'ai découvert que même avec le réglage de la propriété mentionnée ci-dessous sur False IE était horriblement lent tout en défilant avec Io Polyfill Active. Ma solution à la fin était d'utiliser un événement de défilement déboché et de gérer ma logique là-bas. J'ai créé une directive de défilement qui gère ceci maintenant. P> à l'aide de Toutes ces autres réponses ont manqué le point qu'il a utilisé le point qu'il a utilisé le polyfill pour IE, car il n'est pas pris en charge dans IE. P> mais si vous utilisez l'intersection officiel de la polyfill de l'observateur de W3C, il gelera, c'est-à-dire si vous Essayez de l'activer. p> J'ai eu la même erreur (et j'ai d'abord trouvé cette question), mais j'ai découvert un petit détail dans la documentation: P> ignorer les changements DOM forts> Ceci n'est pas possible avec l'IO d'origine (car il gère cela hors de la boîte), il est donc facile de manquer. Mais apparemment, la mise en œuvre de W3C vérifie également les mutations DOM. P> angulaire (et je suppose également réagir et d'autres cadres) qui changent fréquemment que le DOM peut ensuite geler. Autre support de navigateur Io hors de la boîte, le polyfill n'est jamais utilisé là-bas. P> Long Histoire Short, c'est ce qui a fonctionné pour moi: P> @hostlistener code> pour cela aussi ralentit-il, c'est-à-dire pour moi. P>
Vous pouvez également choisir de ne pas rechercher les intersections lorsque le DOM change en définissant la propriété user_mutation_observateur d'un observateur code> sur false code> p>
BlockQuote> IntersectionObserver.prototype.USE_MUTATION_OBSERVER = false; // Globally (didn't work for me)
J'ai désactivé l'observateur d'intersection pour IE11 seulement et écrivit une logique alternative pour cela. Mettra en œuvre cela et vérifiera. Merci, ça ressemble à une meilleure façon.
Juste une tête de tête: je désactive actuellement l'IO pour IE11 car même avec ce drapeau, il est toujours horriblement lent dans IE. Impossible de l'obtenir pour exécuter des performances, même avec l'ajustement de la propriété throttle_timeout qu'ils fournissent pour ce polyfill. Les chèques pour IO pour IE devraient être débondisés et non étranglés (dans mon cas)