标签：图片加载 key asc anim text 请求 func col concat
css新增样式Animation的运用
希望可以通过这个案例加深对Animation以及Transform 两大api的认识
效果图如下：
在这里需要注意的是：理应通过发送服务器请求来获取图片，从而达到这种动态加载的效果 通过node和ajax
但本文采取了另一种本地动态加载的办法来展现：即 通过本地获取图片路径，利用图片的onload方法来判断加载成功与失败
模拟效果需要使用Chrome的开发者工具里的上网环境：
html代码如下：
<div id="wrap"> <div class="inner"> <img src="load/logo2.png" > <p>已加载0%</p> </div> </div>
css代码如下：
@keyframes move{ from{ /* top: 0px; */ /* debugger; */ transform: rotateY(0deg); } to{ /* top: 40px; */ transform: rotateY(360deg); } } *{ padding: 0; margin: 0; } /* 解决滚动条 */ html,body{ height: 100%; overflow: hidden; } /* 位置高宽 垂直水平居中方案 */ #wrap{ height: 100%; position: relative; background: gray; } #wrap>.inner{ position: absolute; left: 50%; top: 50%; transform: translate3d(-50%,-50%,0); text-align: center; white-space: nowrap; perspective: 200px; transform-style: preserve-3d; } #wrap>.inner>img{ font-size: 50px; position: relative; animation: move 1s linear infinite normal; }
JavaScript代码如下：
window.onload=function(){ var pNode=document.querySelector("#wrap > .inner > p"); var flag=1; // var img=document.querySelector("#wrap > .inner > img"); // 1.首先需要一个数组把js对象遍历出来 都添加到数组中 此时没有使用ajax 和node 模拟使用请求数据库数据 var arr =[]; for(arrNode in imgData){ arr=arr.concat(imgData[arrNode]); } // 2.再把图片添加到浏览器中 for(i=0;i<arr.length;i++){ var img=new Image(); img.src=arr[i]; img.onload = function(){ flag++; // 3.此时要计算p标签的内容 pNode.innerHTML="已加载"+Math.round(flag/arr.length*100)+"%"; } img.onerror=function(){ console.log("图片加载失败"); } } }
标签：图片加载 key asc anim text 请求 func col concat
原文地址：https://www.cnblogs.com/lufei910/p/11444170.html
