• Morning to go to work to catch fish time to see a use of “cross observer” this little baby, easy to achieve lazy loading, suction top, bottom.

  • Recall that I used to listen to scroll to calculate the top distance of scroll.

Firstly, we will briefly review the attributes and methods of IntersectionObserver

var io = new IntersectionObserver(callback, option);

IntersectionObserver is a constructor provided natively by the browser, where callback is a callback function and option is a configuration object

attribute

  1. root

    The specific ancestor element of the listening object. If no value is passed in or the value is null, the top-level document window is used by default.

  2. rootMargin

    RootMargin Sets the extension of the root region. For example, when we do lazy loading, we usually have a pre-loaded distance. This can be done by setting rootMargin:’0px 0px 200px 0px’, top right, bottom left. This means that if an element is 200px away from the bottom it will be detected.

  1. threshold

    The default threshold parameter is 0, which means that the method will be triggered when it first intersects, but will not be triggered again until it leaves. Therefore, this parameter is used to set some specific intersection ratio, which will be automatically triggered when it is reached.

methods

  1. Observe (Element) : Monitor an element and pass in the element to be monitored as an argument

  2. Unobserve (Element) : To stop listening on an element, pass in the element to stop listening

  3. Disconnect () : Disconnects the listener

  4. TakeRecords () : returns all elements is listening on the IntersectionObserverEntry array of objects

Implementing lazy loading

The effect

Go straight to code

//html
    <div class="imgWarp">
      <img alt="Load"
           class="lazyload"
           src=""
           data-origin="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1567391611&di=25036e46ab 595855036662439ff9aeff&src=http://b-ssl.duitang.com/uploads/blog/201312/14/20131214145220_QQANN.jpeg">
      <img alt="Load"
           class="lazyload"
           src=""
           data-origin="Https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3617103641, & FM = 26 & gp = 0. 169754897 JPG">
      <img alt="Load"
           class="lazyload"
           src=""
           data-origin="Https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2942419345, & FM = 26 & gp = 0. 2278127334 JPG">
    </div>

//js
function Observer () {
      let images = document.querySelectorAll(".lazyload");
      let observer = new IntersectionObserver(entries => {
        entries.forEach(item => {
          if(item.isIntersecting) { item.target.src = item.target.dataset.origin; // Start loading the image, place the value of data-origin in SRC observer.unobserve(item.target); // Stop listening for images that have started loading}}); }, { rootMargin:"0px 0px -100px 0px"// cross the 100 of the view before starting to send events}); images.forEach(item => observer.observe(item)); ImgWarp {display: flex; flex-direction: column; margin-top: 1000px; .lazyload { margin-top: 30px; display: inline-block; width: 120px; height: 120px; position: relative; } .lazyload:after { position: absolute; content:"";
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: block;
      background-color: #ccc;}}Copy the code
  • Another advantage of this approach is that it works just as well when there is a horizontal scrollbar at a node on the page: the code is not up and you can try it out yourself

Only three or four lines of CSS code need to be changed.

Realization of animation

// html

    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
    
//js
function onLoad () {
      let list = document.querySelectorAll('ul li');
      let observer = new IntersectionObserver(entries => {
        entries.forEach(element => {
          if (element.isIntersecting) {
            element.target.classList.add("show"); // Add the show class name observer.unobserve(element.target); // Remove listener}}); }) list.forEach(item => observer.observe(item)); } //scss ul { margin-top: 500px; display: flex; width: 90%; justify-content: center; align-items: center; flex-wrap: wrap; text-align: center; li { width: 40%; background-color: aqua; width: 150px; margin-bottom: 20px; height: 150px; &:nth-child(2n) { margin-left: 20px; } &.show {// default from left in animation: left 1.4s ease; &:nth-child(2n) {animation: right 1.4s ease; } } } } @keyframes left { from { opacity: 0; transform: translate(-40px, 20px) rotate(80deg); Opacity: 1;} to {opacity: 1; } } @keyframes right { from { opacity: 0; transform: translate(40px, 20px) rotate(-80deg); Opacity: 1;} to {opacity: 1; }}Copy the code

To sum up a wave, probably like this bye!