1. Lazy loading of pictures

1. Picture lazy loading principle

Set the img tag SRC in the page to point to a small image or leave SRC empty, and then define the data-src attribute to point to the actual image. SRC points to a default image, otherwise a request is sent to the server when SRC is empty. An address that can point to loading.

<! DOCTYPE html><html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
    <title>Lazy loading principle</title>
  </head>
  <body>
    <img src="images1/default.png" data-src="./images1/5.jpg" alt="" width="660" />
    <script>
      // 1. Document coordinates: AN HTML document, once rendered, has a fixed size

      // 2. Viewport coordinates: the part of the document that the user sees and the part of the document that the window displays

      // Relationship between document and viewport:
      // 1. The document is less than or equal to the viewport
      // The entire document can be displayed on one screen without scroll bars, such as Baidu

      // 2. The document is larger than the viewport
      // This is normal, one screen will not finish, there will be a scroll bar, drag the scroll bar to see more content
      / / such as PHP. Cn

      // Viewport height
      let viewHeight = document.documentElement.clientHeight;
      console.log(viewHeight);

      document.documentElement.style.height = "1000px";

      // Roll height
      // Usually just focus on height, since width is limited and height expands with content
      console.log(document.documentElement.scrollTop);

      // Scroll events
      window.onscroll = function () {
        const img = document.querySelector("img");
        // img.src = img.dataset.src;
        setTimeout(function () {
          img.src = img.dataset.src;
        }, 2000);
      };
    </script>
  </body>
</html>
Copy the code

2. Image lazy loading implementation

<! DOCTYPE html><html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
    <title>Picture lazy loading cases</title>
    <style>
      .container {
        width: 500px;
        display: grid;
        gap: 10px;
        grid-template-columns: repeat(auto-fit, minmax(200px.1fr));
      }
      .container img {
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <img src="images2/temp.jpg" alt="" data-src="images2/img-1.jpg" />
      <img src="images2/temp.jpg" alt="" data-src="images2/img-2.jpg" />
      <img src="images2/temp.jpg" alt="" data-src="images2/img-3.jpg" />
      <img src="images2/temp.jpg" alt="" data-src="images2/img-4.jpg" />
      <img src="images2/temp.jpg" alt="" data-src="images2/img-5.jpg" />
      <img src="images2/temp.jpg" alt="" data-src="images2/img-6.jpg" />
      <img src="images2/temp.jpg" alt="" data-src="images2/img-7.jpg" />
      <img src="images2/temp.jpg" alt="" data-src="images2/img-8.jpg" />
      <img src="images2/temp.jpg" alt="" data-src="images2/img-9.jpg" />
      <img src="images2/temp.jpg" alt="" data-src="images2/img-10.jpg" />
      <img src="images2/temp.jpg" alt="" data-src="images2/img-11.jpg" />
      <img src="images2/temp.jpg" alt="" data-src="images2/img-12.jpg" />
      <img src="images2/temp.jpg" alt="" data-src="images2/img-13.jpg" />
      <img src="images2/temp.jpg" alt="" data-src="images2/img-14.jpg" />
      <img src="images2/temp.jpg" alt="" data-src="images2/img-15.jpg" />
      <img src="images2/temp.jpg" alt="" data-src="images2/img-16.jpg" />
      <img src="images2/temp.jpg" alt="" data-src="images2/img-17.jpg" />
      <img src="images2/temp.jpg" alt="" data-src="images2/img-18.jpg" />
      <img src="images2/temp.jpg" alt="" data-src="images2/img-19.jpg" />
      <img src="images2/temp.jpg" alt="" data-src="images2/img-20.jpg" />
    </div>

    <script>
      // All images
      const imgs = document.querySelectorAll(".container img");
      // const imgs = document.images;
      // Viewport height
      const clientHeight = document.documentElement.clientHeight;

      // Listen for scroll events
      // "scroll": scroll event, onscroll: event attribute, not event name
      window.addEventListener("scroll", layzyload);

      // Display the first screen immediately after the page is loaded
      window.addEventListener("load", layzyload);

      // lazy callback
      function layzyload() {
        // Roll distance
        let scrollTop = document.documentElement.scrollTop;

        imgs.forEach(img= > {
          // The height of the top of the image from its parent is less than the sum of viewport height and scrolling distance
          if (img.offsetTop < clientHeight + scrollTop) {
            setTimeout(function () {
              img.src = img.dataset.src;
            }, 500); }}); }</script>
  </body>
</html>
Copy the code

Second, round broadcast chart

HTML:

<! DOCTYPEhtml>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
    <title>Shuffling figure</title>
    <link rel="stylesheet" href="banner/banner.css" />
  </head>
  <body>
    <div class="container">
      <! -- 1. Picture Group -->
      <nav class="imgs">
        <a href=""><img src="banner/banner1.jpg" alt="" data-index="1" class="active" /></a>
        <a href=""><img src="banner/banner2.jpg" alt="" data-index="2" /></a>
        <a href=""><img src="banner/banner3.jpg" alt="" data-index="3" /></a>
        <a href=""><img src="banner/banner4.jpg" alt="" data-index="4" /></a>
      </nav>

      <! -- 2. Small button in the bottom of the picture -->
      <nav class="btns">
        <! -- The number of small buttons must match the number of images, so it should be created dynamically -->
        <! -- <a href="" data-index="1" class="active"></a> <a href="" data-index="2"></a> <a href="" data-index="3"></a> <a href="" data-index="4"></a> -->
      </nav>

      <! 3. Turn the page -->
      <nav class="skip">
        <a href="" class="prev">&lt;</a>
        <a href="" class="next">&gt;</a>
      </nav>
    </div>

    <script>
      // All images
      const imgs = document.querySelectorAll(".container >.imgs img");
      / / button group
      const btnGroup = document.querySelector(".container > .btns");
      // Turn the page button
      const skip = document.querySelector(".container > .skip");

      // Create a set of small buttons corresponding to the number of images
      function autoCrateBtns(ele, imgLength) {
        // Reuse document fragments to simplify/optimize programming
        const frag = document.createDocumentFragment();
        for (let i = 0; i < imgLength; i++) {
          const a = document.createElement("a");
          a.href = "#";
          a.dataset.index = i + 1;
          if (i === 0) a.classList.add("active");
          frag.append(a);
        }
        ele.append(frag);
      }
      autoCrateBtns(btnGroup, imgs.length);

      // Add a click event to the little button you just generated
      const btns = document.querySelectorAll(".container > .btns > *");

      // Two public functions
      // 1. Get the active element
      function getActiveEle(eles) {
        // Turn the collection of elements into a real array
        // console.log([...eles]);
        let activeEles = [...eles].filter(ele= > ele.classList.contains("active"));
        // console.log(activeEles.shift());
        return activeEles.shift();
      }

      // getActiveEle(btns);
      // getActiveEle(imgs);

      // 2. Set the active element and update the image being displayed according to the button index
      // The argument is the index of the button being clicked
      function setActiveEle(btnIndex) {
        // console.log(btnIndex);
        // console.log(imgs, btns);

        // 1. Remove the previously active styles
        [imgs, btns].forEach(arr= > {
          getActiveEle(arr).classList.remove("active");
          // 2. Reset the buttons and images that should be activated according to the current custom index
          arr.forEach(item= > {
            if (item.dataset.index === btnIndex) {
              item.classList.add("active"); }}); }); }// Add an event to the button
      btns.forEach(btn= > btn.addEventListener("click".ev= > setActiveEle(ev.target.dataset.index)));

      / / thinking:
      // 1. Add the click event for the page turn button, and note the border treatment for the last and first images
      // 2. Implement timed playback of the rote graph
      // Turn off auto play when mouse is in and start auto play when mouse is out
      // setInterval(), interval timer (repeat)
      // dispathEvent(): event dispatcher
    </script>
  </body>
</html>
Copy the code

Banner. CSS file:

/* Initialize */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
a {
  text-decoration: none;
}

/* The container of the rotation diagram */
.container {
  width: 62.5 em;
  height: 22em;
  margin: 1em auto;
  /* To locate the element/locate the parent */
  position: relative;
}
/* group */
.container > .imgs img {
  width: 100%;
  height: 100%;

  /* All hidden */ by default
  display: none;

  /* Make sure that only one image is seen at a time, and all images share the container */
  position: absolute;
  left: 0;
  top: 0;
}

/* Set the image to be displayed by default */
.container > .imgs img.active {
  display: block;
}

/* Button group (single button) */
.container > .btns {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  /* Horizontal center */
  text-align: center;
}
.container > .btns a {
  /* Convert to inline block elements: that is, they can be arranged horizontally, and both support width Settings */
  display: inline-block;
  padding: 0.5 em;
  margin: 0 0.2 em;
  background-color: #fff;
  border-radius: 50%;
}
.container > .btns a.active {
  background-color: # 000;
}
/* Page turn button */
.container .skip a {
  position: absolute;
  width: 2.5 rem;
  height: 5rem;
  line-height: 5rem;
  text-align: center;
  opacity: 0.3;
  top: 9rem;
  font-weight: lighter;

  font-size: 2rem;
  background-color: #ccc;
}
.container .skip .prev {
  left: 0;
}
.container .skip .next {
  right: 0;
}
.container .skip *:hover {
  opacity: 0.6;
  color: # 666;
}
Copy the code

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

PHP learning road: day 14 – JS image lazy loading and rotation graph

1. Lazy loading of pictures

1. Picture lazy loading principle

2. Image lazy loading implementation

Second, round broadcast chart

PHP learning road: day 14 – JS image lazy loading and rotation graph

1. Lazy loading of pictures

1. Picture lazy loading principle

2. Image lazy loading implementation

Second, round broadcast chart

Related Posts

A brief overview of create-react-app and React-app-rewired principles

Vue3 best practices

Tencent school recruit front on three sides, abuse to lu | the nuggets technical essay