Html5 uses animations to load images,

Html5 uses animations to load images,

In this example, the canvas label and Javascript script of HTML5 are used to compile the image loading effect. Use a browser that supports HTML5 to preview the effect:

For

Html section:

<! DOCTYPE html> 
JavaScript section:
// Initialize var canvas = document. getElementById ("canvas"), context = canvas. getContext ("2d"), image = new Image (); image. src = "img/test.jpg"; // function drawImg1 () {var drawWidth = 0, interval = setInterval (function () {context. drawImage (image, 0, 0, drawWidth, image. height, 0, 0, drawWidth, image. height); drawWidth + = 20; if (drawWidth> canvas. width) clearInterval (interval) ;}, 100) ;}// function drawImg2 () {var drawWidth = 0, drawLeft = canvas. width/2, interval = setInterval (function () {context. drawImage (image, drawLeft, 0, drawWidth, image. height, drawLeft, 0, drawWidth, image. height); drawWidth + = 20; drawLeft-= 10; if (drawLeft <0) clearInterval (interval) ;}, 100 );} // function drawImg3 () {var drawWidth = 0, spaceWidth = canvas. width/20, // 10 indicates the number of split blocks interval = setInterval (function () {for (var I = 0; I <20; I ++) {context. drawImage (image, I * spaceWidth, 0, drawWidth, image. height, I * spaceWidth, 0, drawWidth, image. height);} drawWidth + = 5; if (drawWidth> spaceWidth) clearInterval (interval) ;}, 100 );}