Implementing image fragmentation loading function based on HTML code
|
Today we will implement a fragmented image loading effect, the effect is as follows:
We implement this in 3 steps:
Define the HTML structure All you need here is a canvas element.
<html>
<body>
<canvas
id="myCanvas"
width="900"
height="600"
style="background-color: black;"
></canvas>
</body>
</html>Split image In this example, we split the image into 100 small fragments according to a grid of 10 rows and 10 columns, so that each small fragment can be rendered independently.
let image = new Image();
image.src = "https://cdn.yinhengli.com/canvas-example.jpeg";
let boxWidth, boxHeight;
// Split 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 rendering requestAnimationFrame(animate);
};requestAnimationFrame: Tells the browser that you want to perform an animation and asks the browser to call the specified callback function to update the animation before the next repaint. Writing animation functions Next, we write an animation function to let the browser randomly render a small fragment before each repaint. The core here is the context.drawImage method.
let canvas = document.getElementById("myCanvas");
let context = canvas.getContext("2d");
function animate() {
// Randomly render a module let x = Math.floor(Math.random() * columns);
let y = Math.floor(Math.random() * rows);
// Core context.drawImage(
image,
x * boxWidth, // The starting position of the horizontal coordinate in the canvas y * boxHeight, // The starting position of the vertical coordinate 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 image)
x * boxWidth, // Start drawing from the x coordinate position of the large image y * boxHeight, // Start drawing from the y coordinate position of the large image boxWidth, // Start drawing from the x position of the large image (the width of the small fragment image)
boxHeight // Starting from the y position of the large image, how high to draw (the height of the small fragment image)
);
counter++;
// If the module is 90% rendered, show the entire image.
if (counter > columns * rows * 0.9) {
context.drawImage(image, 0, 0);
} else {
requestAnimationFrame(animate);
}
}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, // Starting position of the horizontal coordinate y * boxHeight, // Starting position of the vertical coordinate boxWidth, // Width of the image boxHeight, // Height of the image x * boxWidth, // Place the x coordinate position of the image on the canvas y * boxHeight, // Place the y coordinate position of the image on the canvas boxWidth, // Width of the image to use boxHeight // Height of the image to use);
counter++;
if (counter > columns * rows * 0.9) {
context.drawImage(image, 0, 0);
} else {
requestAnimationFrame(animate);
}
}
</script>
</body>
</html>Summarize Through this Demo, we use canvasAPI to achieve the fragment loading effect of images. Isn't it very simple? This is the end of this article about implementing image fragmentation loading function based on HTML code. For more relevant html image fragmentation loading content, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future! |
<<: Detailed explanation of Vue's keyboard events
>>: Draw an iPhone based on CSS3
Recommend
A brief discussion on the implementation principle of Webpack4 plugins
Table of contents Preface know Practice makes per...
Should I use distinct or group by to remove duplicates in MySQL?
Preface About the performance comparison between ...
After Webpack-cli is successfully installed, check the webpack -v error case for details
Table of contents question 1. Install webpack web...
Modularity in Node.js, npm package manager explained
Table of contents The basic concept of modularity...
Detailed explanation of how to query fields containing '%' in MySQL like (ESCAPE usage)
In the SQL like statement, for example SELECT * F...
Sample code for installing ASPNET.Core3.0 runtime in Linux
# The following examples are for x64-bit runtime ...
Vue realizes click flip effect
Use vue to simply implement a click flip effect f...
What is the base tag and what does it do?
The <base> tag specifies the default addres...
Detailed analysis of the blocking problem of js and css
Table of contents DOMContentLoaded and load What ...
How can MySQL effectively prevent database deletion and running away?
Table of contents Safe Mode Settings test 1. Upda...
Vue implementation example using Google Recaptcha verification
In our recent project, we need to use Google robo...
XHTML Getting Started Tutorial: Simple Web Page Creation
Create your first web page in one minute: Let'...
Additional instructions for using getters and actions in Vuex
Preliminary Notes 1.Differences between Vue2.x an...
js to realize payment countdown and return to the home page
Payment countdown to return to the home page case...
About the IE label LI text wrapping problem
I struggled with this for a long time, and after s...