Today we will implement an image fragmentation loading effect, which looks like this:

Fragmentation loading

We divided it into 3 steps to achieve:

  • Defining HTML structure
  • Resolution images
  • Write an animation function

Defining HTML structure

All you need is a Canvas element.

<html>
  <body>
    <canvas
      id="myCanvas"
 width="900"  height="600"  style="background-color: black;"  ></canvas>  </body> </html> Copy the code

Resolution images

In this example, we split the image into 100 small pieces in a grid of 10 rows and 10 columns, so that each small piece can be rendered independently.

let image = new Image();
image.src = "https://cdn.yinhengli.com/canvas-example.jpeg";
let boxWidth, boxHeight;
// Divide into 10 rows and 10 columns
let rows = 10. columns = 20. counter = 0;  image.onload = function () {  // Calculate the width and height of each row and column  boxWidth = image.width / columns;  boxHeight = image.height / rows;  // Loop render  requestAnimationFrame(animate); }; Copy the code

RequestAnimationFrame: tells the browser that you want to execute an animation and asks the browser to call the specified callback to update the animation before the next redraw.

Write an animation function

Next we write an animation function that lets the browser randomly render a small fragment before each redraw.

The core here is the context.drawImage method.

let canvas = document.getElementById("myCanvas");
let context = canvas.getContext("2d");

function animate() {
  // Render a module randomly
 let x = Math.floor(Math.random() * columns);  let y = Math.floor(Math.random() * rows);  / / core  context.drawImage(  image,  x * boxWidth, // Canvas abscissa starting position  y * boxHeight, // The starting vertical position in the canvas  boxWidth, // The width of the drawing (the width of the small fragment image)  boxHeight, // The height of the drawing (the height of the small fragment)  x * boxWidth, // Start drawing from the x-coordinate position of the larger image  y * boxHeight, // Start drawing from the y coordinate of the large image  boxWidth, // Start from the x position of the large image and draw the width (the width of the small fragment image)  boxHeight // Start from the y position of the large image and draw how high (the height of the small fragment image)  );  counter++;  // If the module renders 90% of the image, let the entire image be displayed.  if (counter > columns * rows * 0.9) {  context.drawImage(image, 0.0);  } else {  requestAnimationFrame(animate);  } } Copy the code

The complete code 

<html>
  <body>
    <canvas
      id="myCanvas"
 width="900"  height="600"  style="background-color: black;"  ></canvas>  <script>  let image = new Image();  image.src = "https://cdn.yinhengli.com/canvas-example.jpeg";  let canvas = document.getElementById("myCanvas");  let context = canvas.getContext("2d");  let boxWidth, boxHeight;  let rows = 10. columns = 20. counter = 0;   image.onload = function () {  boxWidth = image.width / columns;  boxHeight = image.height / rows;  requestAnimationFrame(animate);  };   function animate() {  let x = Math.floor(Math.random() * columns);  let y = Math.floor(Math.random() * rows);  context.drawImage(  image,  x * boxWidth, // Start position of the x-coordinate  y * boxHeight, // The starting ordinate position  boxWidth, // Width of image  boxHeight, // Height of the image  x * boxWidth, // Place the x position of the image on the canvas  y * boxHeight, // Place the image's y position on the canvas  boxWidth, // The width of the image to use  boxHeight // The height of the image to use  );  counter++;  if (counter > columns * rows * 0.9) {  context.drawImage(image, 0.0);  } else {  requestAnimationFrame(animate);  }  }  </script>  </body> </html> Copy the code

conclusion

Through this Demo, we use the canvasAPI to achieve the image fragmentation loading effect, is not particularly easy!