从http://bluestreeter.adidas.com.cn/index.html这个H5上扒下来的代码
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" 6 content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0,user-scalable=no"> 7 <meta http-equiv="Cache-Control" content="max-age=3600"/> 8 <title>序列帧播放</title> 9 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> 10 <style> 11 /*----Loading----*/ 12 #load { 13 width: 100vw; 14 height: 100vh; 15 background: #0081c7; 16 position: fixed; 17 top: 0; 18 left: 0; 19 text-align: center; 20 z-index: 200; 21 } 22 23 #load img { 24 position: absolute; 25 display: none; 26 top: 0; 27 left: 0; 28 width: 100%; 29 height: 100%; 30 } 31 32 #load img:first-child { 33 display: block; 34 } 35 36 #landingMain { 37 width: 100vw; 38 height: 100vh; 39 position: absolute; 40 top: 0; 41 left: 0; 42 overflow: hidden; 43 } 44 </style> 45 </head> 46 <body> 47 <section id="load"></section> 48 </body> 49 <script> 50 var keySources = [], 51 keyInterval = 0; 52 for (var i = 0; i <= 114; i += 2) { 53 var num = ""; 54 var len = i.toString().length; 55 if (len == 1) { 56 num = "00"; 57 } 58 if (len == 2) { 59 num = "0"; 60 } 61 if (len == 3) { 62 num = ""; 63 } 64 keySources.push("http://bluestreeter.adidas.com.cn/assets/images/loading/" + num + i + ".png"); 65 } 66 loadImages(keySources, loadAnimate); 67 68 function loadImages(sources, callback) { 69 var loadedImages = 0; 70 var numImages = 0; 71 var images = []; 72 numImages = sources.length; 73 for (var i = 0, len = sources.length; i < len; i++) { 74 images[i] = new Image(); 75 images[i].onload = function () { 76 if (++loadedImages >= numImages) { 77 callback(images); 78 } 79 }; 80 images[i].src = sources[i]; 81 } 82 } 83 84 function loadAnimate() { 85 86 playKeyframesAnimation($("#load"), keySources, 50); 87 } 88 89 function playKeyframesAnimation(ele, keySources, keyTime) { 90 keySources.forEach(function (item, i) { 91 var keyHtml = '<img src="' + item + '" >'; 92 ele.append(keyHtml); 93 }); 94 95 var i = 0; 96 keyInterval = setInterval(function () { 97 i++; 98 if (i >= keySources.length) { 99 i = 0; 100 } 101 ele.find("img").eq(i).show().siblings().hide(); 102 }, keyTime) 103 } 104 </script> 105 </html>