#javascript
#javascript
Вопрос:
Согласно PageSpeed Insights, Twitter значительно замедляет скорость загрузки страницы введите описание изображения здесь
введите описание изображения здесь
я пытаюсь загрузить twitter, только если пользователь прокручивает его вниз, иначе нет необходимости его загружать
<div class="testimonials__tweetbox">
<blockquote class="twitter-tweet"><p lang="en" dir="ltr">COMING SOON</p>amp;mdash; SuperMarioRistorante (@RistoranteSuper) <a href="https://twitter.com/RistoranteSuper/status/1284416990581530624?ref_src=twsrc^tfw">July 18, 2020</a></blockquote> <script src="https://platform.twitter.com/widgets.js" charset="utf-8" defer></script>
</div>
моя ленивая загрузка
// LAZY LOADING Vanilla JS
var lottie = document.querySelectorAll('.twitter-tweet');
const appearOptions = {
threshold: 0,
rootMargin: "0px 0px -470px 0px"
};
var observer = new IntersectionObserver(function (entries, observer){
entries.forEach(entry => {
if (entry.isIntersecting) {
var img = entry.target;
observer.unobserve(entry.target);
console.log(entry)
}
});
},
appearOptions);
lottie.forEach(img => {
observer.observe(img);
});
// End of LAZY LOADING Vanilla JS
почему при обновлении страницы виджет Twitter все еще загружается?
Комментарии:
1. Не мое решение, но я столкнулся с ними, когда столкнулся с той же проблемой. Возможно, они могут помочь вам или другим: статический рендеринг твитов с Next.js : библиотека static-tweet.vercel.app React, созданная на основе предыдущего решения: github.com/transitive-bullshit/react-static-tweets