Question

我在页面中使用交集观察器，但是我认为我犯了错误，因为当intersection observer适用并且fixed nav工作不正常时，我的网站崩溃了/冻结了，疯。我想看看是什么使网站崩溃了。您可以看到一个示例here。

我认为那是因为我移动了代码：

const onEntry7 = animateSequence('.floating', 'show-bottom');
const observer7 = new IntersectionObserver(onEntry7);
const allElements7 = document.querySelectorAll('#staff div.with-img');
allElements7.forEach(e => observer7.observe(e));

在return function entries {}内部。所以之前是：

const onEntry7 = animateSequence('.floating', 'show-bottom');
const observer7 = new IntersectionObserver(onEntry7);
const allElements7 = document.querySelectorAll('#staff div.with-img');
allElements7.forEach(e => observer7.observe(e));

function animateSequence(targetSelector, classToAdd, delay = 250) {
  const animatedElements = [];
  let chain = Promise.resolve();

  function show(e) {
    return new Promise((res, rej) => {
      setTimeout(() => {
        e.classList.add(classToAdd);
        res();
      }, delay);
    });
  }
  return function(entries) {
    entries.forEach(entry => {
      if (entry.intersectionRatio > 0) {
        const elem = entry.target.querySelector(targetSelector);
        if (!animatedElements.includes(elem)) {
          animatedElements.push(elem);
          chain = chain.then(() => show(elem));
          observer7.unobserve(entry.target);
        }
      }
    })
  }
}

在那之后的代码是：

function animateSequence(targetSelector, classToAdd, delay = 250) {
  const animatedElements = [];
  let chain = Promise.resolve();

  function show(e) {
    return new Promise((res, rej) => {
      setTimeout(() => {
        e.classList.add(classToAdd);
        res();
      }, delay);
    });
  }
  return function(entries) {
const onEntry7 = animateSequence('.floating', 'show-bottom');
const observer7 = new IntersectionObserver(onEntry7);
const allElements7 = document.querySelectorAll('#staff div.with-img');
allElements7.forEach(e => observer7.observe(e));
    entries.forEach(entry => {
      if (entry.intersectionRatio > 0) {
        const elem = entry.target.querySelector(targetSelector);
        if (!animatedElements.includes(elem)) {
          animatedElements.push(elem);
          chain = chain.then(() => show(elem));
          observer7.unobserve(entry.target);
        }
      }
    })
  }
}

之所以这样做是因为Safari控制台在应用observer7时给了我有关intersection observer的错误（只有SAFARI !，其他浏览器才能正常工作，所以我认为问题可能出在该代码中）：：

if (window.innerWidth > 768) {

      // Fires when element appears in the viewport
function onEntry(entry) {
  if (entry[0].isIntersecting) {
    entry[0].target.classList.add("active");
  }
}

// Instantiate a new Intersection Observer
let observer = new IntersectionObserver(onEntry);

let element = document.querySelector(".arrow-down");
observer.observe(element);





const onEntry8 = animateSequence('.icons-info', 'active');
const observer8 = new IntersectionObserver(onEntry8);
const allElements8 = document.querySelectorAll('#rucab div.fila-animada');
allElements8.forEach(e => observer8.observe(e));

function animateSequence(targetSelector, classToAdd, delay = 0) {
  const animatedElements = [];
  let chain = Promise.resolve();

  function show(e) {
    return new Promise((res, rej) => {
      setTimeout(() => {
        e.classList.add(classToAdd);
        res();
      }, delay);
    });
  }
  return function(entries) {
    entries.forEach(entry => {
      if (entry.intersectionRatio > 0) {
        const elem = entry.target.querySelector(targetSelector);
        if (!animatedElements.includes(elem)) {
          animatedElements.push(elem);
          chain = chain.then(() => show(elem));
          observer8.unobserve(entry.target);
        }
      }
    })
  }
}


// Instantiate a new Intersection Observer

let observer10 = new IntersectionObserver(onEntry10);

let element10 = document.querySelector("#home .home-text-p");
observer10.observe(element10);

function onEntry10(entry10) {
let superman = document.querySelector('.superman');
  if (entry10[0].isIntersecting) {
      setTimeout(function() {
    superman.classList.add("active");
    }, 700);
  }
}

// Instantiate a new Intersection Observer

let observer9 = new IntersectionObserver(onEntry9);

let element9 = document.querySelector("#home .home-text-p");
observer9.observe(element9);

function onEntry9(entry9) {
let werucab = document.querySelector('.we-are-rucab-img');
  if (entry9[0].isIntersecting) {
    werucab.classList.add("show-bottom");
  }
}



function onEntry3(entry3) {
let mujeric = document.querySelector('.mujer-icon');
  if (entry3[0].isIntersecting) {
    mujeric.classList.add("show-bottom");
  }
}

// Instantiate a new Intersection Observer

let observer3 = new IntersectionObserver(onEntry3);

let element3 = document.querySelector("#inscripciones .btn-black");
observer3.observe(element3);


function onEntry4(entry4) {
let mejoresins = document.querySelector('.mejores-instalaciones');
  if (entry4[0].isIntersecting) {
    mejoresins.classList.add("active");
  }
}


$(function () {
    $('#carouselExampleControls3').carousel({
        interval:5000,
        pause: "false"
    });
              $('#carouselExampleControls3').carousel('pause');


});




// Instantiate a new Intersection Observer
let observer4 = new IntersectionObserver(onEntry4);

let element4 = document.querySelector(".mejores-instalaciones p");
observer4.observe(element4);

// Instantiate a new Intersection Observer
let observer5 = new IntersectionObserver(onEntry5);


let element5 = document.querySelector(".test-h1");
observer5.observe(element5);

function onEntry5(entry5) {
let test = document.querySelector('#carouselExampleControls3');
  if (entry5[0].isIntersecting) {
    test.classList.add("active");
    $('#carouselExampleControls3').carousel('cycle');

  }
}







// Instantiate a new Intersection Observer
let observer6 = new IntersectionObserver(onEntry6);


let element6 = document.querySelector("#instafeed");
observer6.observe(element6);

function onEntry6(entry6) {
let instagram = document.querySelector('.insta-feed');
  if (entry6[0].isIntersecting) {
    instagram.classList.add("active");
  }
}






function animateSequence(targetSelector, classToAdd, delay = 250) {
  const animatedElements = [];
  let chain = Promise.resolve();

  function show(e) {
    return new Promise((res, rej) => {
      setTimeout(() => {
        e.classList.add(classToAdd);
        res();
      }, delay);
    });
  }
  return function(entries) {
const onEntry7 = animateSequence('.floating', 'show-bottom');
const observer7 = new IntersectionObserver(onEntry7);
const allElements7 = document.querySelectorAll('#staff div.with-img');
allElements7.forEach(e => observer7.observe(e));
    entries.forEach(entry => {
      if (entry.intersectionRatio > 0) {
        const elem = entry.target.querySelector(targetSelector);
        if (!animatedElements.includes(elem)) {
          animatedElements.push(elem);
          chain = chain.then(() => show(elem));
          observer7.unobserve(entry.target);
        }
      }
    })
  }
}
// Initialize library
lozad('.lozad', {
    load: function(el) {
        el.src = el.dataset.src;
        el.onload = function() {
            el.classList.add('fadelazy-fast')
        }
    }
}).observe()
}



      $('.carousel').carousel({
    pause: "false"
});

      $(function () {
  $('[data-toggle="popover"]').popover()
})
     window.onorientationchange = function() {
window.location.reload();
};
      // cache the element
var $navBar = $('.nav');
var $rlogo = $('.r-logo-menu-desktop');

// find original navigation bar position
var navPos = $navBar.offset().top;

// on scroll
$(window).scroll(function() {

    // get scroll position from top of the page
    var scrollPos = $(this).scrollTop();

    // check if scroll position is >= the nav position
    if (scrollPos >= navPos) {
        $navBar.addClass('fixed');
        $rlogo.addClass('show');
    } else {
        $navBar.removeClass('fixed');
        $rlogo.removeClass('show');
    }

}); 

          </script>

          <script type="text/javascript">
    var userFeed = new Instafeed({
        get: 'user',
        userId: '5388417298',
        accessToken: '5388417298.1677ed0.e3460b92c6f445c98d18f18635f740cf',
  template: '<a href="{{link}}" class="in-img" target="_blank" id="{{id}}" style="background-image: url({{image}});"></a>',
  sortBy: 'most-recent',
  limit: 4,
resolution: 'standard_resolution',

    });
    userFeed.run();

我的页面崩溃/冻结，因为路口观察器

0 个答案: