资源百分比预加载

JS代码 :

var loadNum = 0,
    resource = [
        ‘aaa.gif‘,
        ‘1.gif‘,
        ‘2.gif‘,
        ‘https://gss0.baidu.com/7Po3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/d439b6003af33a872e9fa4dac35c10385243b504.jpg‘,
        ‘images/layer1.jpg‘,
        ‘images/layer2.jpg‘,
        ‘images/layer3.jpg‘
    ],
    resLen = resource.length;

for (var i = 0; i < resLen; i++) {
 var Images = new Image();
        Images.src = resource[i];
    if (Images.complete) { //如果缓存里有这张图片,就是触发complete
        loadNum++;
        var percent = Math.floor(loadNum / resLen * 100);
        setNum(percent);
        continue;
    }
    Images.onload = function() { //图片加载
        loadNum++;
        var percent = Math.floor(loadNum / resLen * 100);
        setNum(percent);
    };
}
function setNum(percent) {
    $("#bfb").text(percent); //设置百分数到DOM上
    if (percent == 100) {
        setTimeout(function() {
            //   do something;
        }, 300);
    }
}

html:

<div id="bfb"></div>
时间: 2025-01-10 23:46:57

资源百分比预加载的相关文章

前端资源预加载并展示进度条

我们经常会看到,一些站点在首次进入的时候会先显示一个进度条,等资源加载完毕后再呈现页面,大概像这样: 然后整个页面的操作就会非常流畅,因为之后没必要再等待加载资源了.尤其是在移动端,或者是页游中,这样做能避免页面出现白屏(等待加载图片),很大程度提升用户体验.那这种技术是如何实现的呢?其实非常简单,本文就来从基础细节探究一番. 为什么需要资源预加载 大多时候,我们的页面并不是一次渲染完毕的,而是随着用户的操作,不断修改DOM节点,如果你动态插入了一个图片节点,那么浏览器要马上发一个http请求,

Android应用程序UI硬件加速渲染的预加载资源地图集服务(Asset Atlas Service)分析

我们知道,Android系统在启动的时候,会对一些系统资源进行预加载.这样不仅使得应用程序在需要时可以快速地访问这些资源,还使得这些资源能够在不同应用程序之间进行共享.在硬件加速渲染环境中,这些预加载资源还有进一步优化的空间.Android系统提供了一个地图集服务,负责将预加载资源合成为一个纹理上传到GPU去,并且能够在所有的应用程序之间进行共享.本文就详细分析这个预加载资源地图集服务的实现原理. 老罗的新浪微博:http://weibo.com/shengyangluo,欢迎关注! 资源预加载

手把手教你构建 Android WebView 的缓存机制 &amp; 资源预加载方案

前言 由于H5具备 开发周期短.灵活性好 的特点,所以现在 Android App大多嵌入了 Android Webview 组件进行 Hybrid 开发 但我知道你一定在烦恼 Android Webview 的性能问题,特别突出的是:加载速度慢 & 消耗流量 今天,我将针对 Android Webview 的性能问题,提出一些有效解决方案. 目录 1. Android WebView 存在什么性能问题? Android WebView 里 H5 页面加载速度慢 耗费流量 下面会详细介绍. 1.

图片预加载

随着移动互联网的火热发展,手机上的APP越来越多,包括web app和native app等.其中web app最离不开网速问题,尤其是游戏等应用.尽管现在的网速变得越来越快了,但是我们为了更好的用户体验,常常对会游戏里用到的资源进行预加载.例如图片等,以我今天做的一个小游戏为例. 我在游戏场景中,用了近三十张图片,如果在运行时才加载的话,必然会很不流畅. 在用户进入页面时,先加载背景,同时给页面加了个cover以及loading. 1.记录图片名 首先,给所需要预加载的图片名存为数组,或者有规

预加载与智能预加载(iOS)

来源:Draveness(@Draveness) 链接:http://www.jianshu.com/p/1519a5302141 前两次的分享分别介绍了 ASDK 对于渲染的优化以及 ASDK 中使用的另一种布局模型:这两个新机制的引入分别解决了 iOS 在主线程渲染视图以及 Auto Layout 的性能问题,而这一次讨论的主要内容是 ASDK 如何预先请求服务器数据,达到看似无限滚动列表的效果的. 这篇文章是 ASDK 系列中的最后一篇,文章会介绍 iOS 中几种预加载的方案,以及 ASD

刚入前端整合的一个手机端页面适配+预加载+获取资源加载进度等的一个小模板

刚入前端不久,之前主要学的是pc端的布局,到公司之后负责的主要是移动段页面,刚开始时为了使页面适应移动端不同的屏幕大小采用的是百分比加媒体查询的方式,做完一个项目之后,感觉非常不好,虽然最后也基本使页面做到了适配.所以做完这个项目之后,我就在网上查找各种屏幕适配的方案,最终找到了一个通过js控制使页面整体缩放的方案,还有一个就是通过js实时检测屏幕大改变html根字体大小的rem布局方案.目前我在使用的是缩放的方案.整体代码基本上是整合的是大牛们分享的一些实用代码,如有什么bug欢迎提出,共同进

前端性能优化 - 资源预加载

转帖: https://css-tricks.com/prefetching-preloading-prebrowsing 当提到前端性能优化时,我们首先会联想到文件的合并.压缩,文件缓存和开启服务器端的 gzip 压缩等,这使得页面加载更快,用户可以尽快使用我们的 Web 应用来达到他们的目标. 资源预加载是另一个性能优化技术,我们可以使用该技术来预先告知浏览器某些资源可能在将来会被使用到. 引用 Patrick Hamann 的解释: 预加载是浏览器对将来可能被使用资源的一种暗示,一些资源可

页面资源预加载(Link prefetch)

不管是浏览器的开发者还是普通web应用的开发者,他们都在做一个共同的努力:让Web浏览有更快的速度感觉.有很多已知的技术都可以让你的网站速度变得更快:使用CSS sprites,使用图片优化工具,使用.htaccess设置页面头信息和缓存时间,JavaScript压缩,使用CDN等.我曾经介绍过本站上使用的一些速度优化技术.而在HTML5里,出现了一个新的用来优化网站速度的新功能:页面资源预加载/预读取(Link prefetch). 页面资源预加载/预读取(Link prefetch)是什么?

基于用户行为的图片等资源预加载

一.图片的懒加载和预加载 懒加载和本文要提到的预加载实际是不同的概念. 典型的懒加载,例如本博文章的图片,当用户滚动图片进入窗体的时候,才去加载:或者用户点击选项卡,原本隐藏的图片此时再去加载,这个也称之为懒加载. 而预加载则是,用户还没有行为发生,资源已经加载完毕,从这一定义来讲,我们传统图片啪啪啪全部加载完毕,本质上也是预加载,好处就在于,体验好啊,没有泛白或者菊花的出现.不足也很明显,那就是资源可能白白加载了,尤其视频之类的,小明打开bilibili就是来围观广告的,结果,百兆视频巴拉拉魔