search

Home >Web Front-end >H5 Tutorial >HTML5 loads images in the form of animation _html5 tutorial skills

HTML5 loads images in the form of animation _html5 tutorial skills

WBOY
WBOYOriginal
2016-05-16 15:51:481869browse

The example uses the HTML5 canvas tag and Javascript script to simply write the loading image effect. Please use a browser that supports HTML5 to preview the effect:
The picture below shows the effect of a gradually horizontal grid

html part:
XML/HTML CodeCopy content to clipboard
  1. > 
  2. <html lang="en" > 
  3. <head> 
  4. <meta charset="UTF- 8"> 
  5. <title>html5 loading image title> 
  6. head> 
  7. <body> 
  8. <button onclick="drawImg1( )">From left to rightbutton>
  9. <button onclick="drawImg2( )">From the center to the left and right sidesbutton>
  10. <button onclick="drawImg3( " > <hr/> 
  11. <canvas class
    12. =
  12. "canvas" id="canvas" width="600" height="300">canvas>  body> 
  13. html> 
  14. JavaScript part: XML/HTML Code
    15. Copy content to clipboard
  1. //Initialization
  2. var canvas = document.getElementById("canvas"),
  3. context = canvas.getContext("2d"),
  4. image = new Image();
  5. image.src = "img/test.jpg";
  6. //Loading method from left to right
  7. function drawImg1(){
  8. var drawWidth = 0,
  9. interval = setInterval(function(){
  10. context.drawImage(image, 0, 0, drawWidth, image.height, 0, 0, drawWidth, image.height);
  11. drawWidth = 20;
  12. if(drawWidth > canvas.width) clearInterval(interval);
  13. },100);
  14. }
  15. //Open the loading method from the center to the left and right sides
  16. function drawImg2(){
  17. var drawWidth = 0,
  18. drawLeft = canvas.width/2,
  19. interval = setInterval(function(){
  20. context.drawImage(image, drawLeft, 0, drawWidth, image.height, drawLeft, 0, drawWidth, image.height);
  21. drawWidth = 20;
  22. drawLeft -= 10;
  23. if(drawLeft < 0) clearInterval(interval);
  24. },100);
  25. }
  26. //Gradually horizontal grid loading method
  27. function drawImg3(){
  28. var drawWidth = 0,
  29. spaceWidth = canvas.width/20, //10 refers to the number of divided blocks
  30. interval = setInterval(function(){
  31. for(var i = 0;i<20;i ){
  32. context.drawImage(image, i*spaceWidth, 0, drawWidth, image.height, i*spaceWidth, 0, drawWidth, image.height);
  33. }
  34. drawWidth = 5;
  35. if(drawWidth > spaceWidth) clearInterval(interval);
  36. },100);
  37. }

The above content is introduced by the editor to load images in the form of animation in HTML5. I hope it will be helpful to everyone!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Use simple image preloading components to improve the user experience of html5 mobile pages _html5 tutorial skillsNext article：Use simple image preloading components to improve the user experience of html5 mobile pages _html5 tutorial skills

Related articles

See more