预加载动画,移动端常用的加载前的百分比动画

<script>
            function loading() {

                function Load() {}

                Load.prototype.loadImgs = function(urls, callback) {
                    this.urls = urls;
                    this.imgNumbers = urls.length;
                    this.loadImgNumbers = 0;
                    var that = this;
                    for(var i = 0; i < urls.length; i++) {
                        var obj = new Image();
                        obj.src = urls[i];
                        obj.onload = function() {
                            that.loadImgNumbers++;
                            callback(parseInt((that.loadImgNumbers / that.imgNumbers) * 100));
                        }
                    }
                };

                var loader = new Load();

                loader.loadImgs([
                    // 将所有需要加载的图片地址写于此处
                    "img/about1.jpg",
                    "img/about2.jpg",
                ], function(percent) {
                    // 假设显示百分比的元素为 $(".percent")
                    $(".percent").text(percent + ‘%‘);

                    // 加载结束后,隐藏相应的 loading 或遮罩
                    if(percent == 100) {
                        $(".mask").css(‘display‘, ‘none‘);
                    }
                });
            }
            // 执行 loading 方法
            loading();
        </script>
时间: 2024-07-31 21:00:40

预加载动画,移动端常用的加载前的百分比动画的相关文章

移动端常用的加载更多的分页公共函数

/***************************分页**************************/function changeSingerList(Btn,arr,func,term){ var temp=1; if(arr.length>0){ var pageNum=Math.ceil(arr.length/term); creatItem(); Btn.bind('click', function (e) { if(temp<pageNum){ temp++; crea

TweenJS----前端常用的js动画库,缓动画和复制动画的制作,效果非常好。

TweenJS类库主要用来调整和动画HTML5和Javascript属性,提供了简单并且强大的tweening接口. http://www.createjs.cc/tweenjs/ http://www.createjs.cc/ CreateJS是基于HTML5开发的一套模块化的库和工具.基于这些库,可以非常快捷地开发出基于HTML5的游戏.动画和交互应用. 快速入门 原文地址:https://www.cnblogs.com/shimily/p/11336278.html

Android ListView分页加载(服务端+android端)Demo

Android ListView分页加载功能 在实际开发中经常用到,是每个开发者必须掌握的内容,本Demo给出了服务端+Android端的两者的代码,并成功通过了测试. 服务端使用MyEclipse,Android端使用Eclipse. 实现效果图: 服务端一共100条数据,共分四页,每页有25条数据. 源代码: 服务端: 需要导入图中这几个jar包. 在运行Android端代码前,需要开启服务端: 下面先给出服务端的代码: 类EmpDataSource: package com.android

Android-搭建简单服务端+ListView异步加载数据

Android-搭建简单服务端+ListView异步加载数据 2014年5月6日 本篇博文带给大家的是教大家如何在MyEclipse中搭建一个服务端,并通过手机端与其通信,异步加载数据. 笔者使用的是MyEclipse,各位也可以直接用Eclipse创建Java Web项目,谷歌提供的ADT Bundle是不能创建Web项目,读者可以下载Eclipse For JaveEE Developer这个IDE. 下面来介绍如何在MyEclipse创建一个Web项目,并部署到Tomcat当中,关于Tom

移动端图片懒加载插件

LazyloadImg介绍 LazyloadImg 轻量级的移动端图片懒加载插件原生js开发,不依赖任何框架或库支持将各种宽高不一致的图片,自动剪切成默认图片的宽高.比如说你的默认图片是一张正方形的图片,则各种宽度高度不一样的图片,自动剪切成正方形.完美解决移动端开发中,用户上传图片宽高不一致而导致的图片变形的问题.简洁的API,让你分分钟入门!!! 快速入门 var lazyloadImg = new LazyloadImg({ el: '#ul [data-src]', //匹配元素 top

SeaJS:一个适用于 Web 浏览器端的模块加载器

什么是SeaJS?SeaJS是一款适用于Web浏览器端的模块加载器,它同时又与Node兼容.在SeaJS的世界里,一个文件就是一个模块,所有模块都遵循CMD(Common Module Definition)规范.SeaJS本身遵循(Keep it Simple, Stupid)理念开发,API仅有几个. 为什么用SeaJS?假如我们要开发一个web应用App,在这个应用中需要使用jquery框架.App的首页index.html会用到module1.js,module1.js依赖module2

vux-scroller实现移动端上拉加载功能

本文将讲述vue-cli+vux-scroller实现移动端的上拉加载功能: 纠错声明:网上查阅资料看到很多人都将vux和vuex弄混,在这里我们先解释一下,vuex是vue框架自带的组件,是数据状态管理工具,vux是一款移动端的UI组件库: vux(官方文档:https://doc.vux.li/zh-CN/)是基于WeUi和vue(2.x)开发的移动端的UI组件库,主要服务于微信页面.基于webpack+vue-loader+vux可以快速开发移动端页面,配合vux-loader方便你在We

浏览器端的javascript加载器

commonJS,定义了一种同步加载脚本的规范.对于浏览器端而言,因为js脚本都是在远端,用同步的方式可能会长时间阻塞线程.因此,浏览器端的js加载器并不会严格按照commonJS来做.seajs作为一个试图遵循commonJS规范的加载器,是在规范的基础上在外面包一层define,来异步加载js,以下是seajs官网的一个例子: // 所有模块都通过 define 来定义 define(function(require, exports, module) { // 通过 require 引入依

Android动画Animation的两种加载执行方式

本文以简单的AlphaAnimation("淡入淡出(透明度改变)"动画)为例,简单的说明Android动画Animation的两种加载执行方法: (1) 直接写Java代码,制作Android动画. (2) 写XML配置文件,加载XML资源文件执行. 其实这两者是一致的.要知道,在Android中,凡是可以在XML文件完成的View,代码亦可完全写出来. 现在先给出一个Java代码完成的动画AlphaAnimation,AlphaAnimation功能简单,简言之,可以让一个View