注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

梦幻雪冰

技在手,能在身,思在脑,从容过生活——陈能堡

 
 
 

日志

 
 

【转载】移动端之强大的预加载  

2015-11-06 22:29:04|  分类: 移动端专题 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
本文转载自叶落非殇《移动端之强大的预加载》
最近一直在做移动端,而移动端最大的问题在于网速和流量,相信很多初学者都遇到过这样的问题-——>移动端点击切换背景图的时候背景图会消失一下,如果网速较差背景图甚至不会出来。原因在于之前浏览器的缓存中并没有图片,因此在点击的时候才会请求缓存图片,而此时网速不好之前的图片被切换,现在需求的图片还没下载下来,就会导致这种现象产生。
为了避免这种情况,预加载就成了必备神器,预加载顾名思义就是预先加载,提前将图片缓存到浏览器中。
在页面开发的过程中经常需要做loading页面,loading并不是平白无故的去添加的,一般我们会在document全部加载完成后才会让loading界面消失,而在document还没load的时候只就是在加载资源,我们可以认为大部分资源都是image,因此我们可以在刚开始的时候执行预加载,将我们需要加载的图片全部加载放到浏览器缓存中,等document完全加载完资源时隐藏loading。
现在流行很多创意H5页面,图片数量居多,以前做loading的时候对于加载进度完全无头绪,现在利用预加载后就可以制作带进度的loading页面。
下面demo可供参考学习:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>叶落非殇</title>
<style>
#view {
font-size: 40px;
text-align: center;
}
</style>
</head>
<body>
<div id="view">0%</div>
<div id="con"></div>
<script>
var view = document.getElementById("view");
var con = document.getElementById("con");
// 存储需要预加载的图片
var load_img = [];
load_img.push('Chrysanthemum.jpg');
load_img.push('Desert.jpg');
load_img.push('Hydrangeas.jpg');
load_img.push('Jellyfish.jpg');
load_img.push('Koala.jpg');
load_img.push('Lighthouse.jpg');
load_img.push('Penguins.jpg');
load_img.push('Tulips.jpg');
// num计数,all表示图片总数,默认百分比为0%
var num = 0;
var all = load_img.length;
var percent = "0%";

// 执行预加载函数
imgPreLoad(load_img, show);
// listArr必须为数组
function imgPreLoad(listArr, callback) {
// 遍历数组每个元素
for(var i = 0; i < listArr.length; i++) {
// 实例化image并传入图片路径
var img = new Image();
img.src = listArr[i];
// 如果缓存中已经有当前图片,直接调用回调函数
if(img.complete) {
// 令回调函数this指向当前img对象
callback.call(img);
} else {
// 如果缓存中没有当前图片,则等待当前图片下载结束执行回调函数
img.onload = function() {
callback.call(img);
}
// 如果下载发生错误则报错
img.onerror = function() {
view.innerHTML = "加载失败";
}
}
}
}
// 回调函数:每张图片加载完执行
function show() {
// 新建img标签并插入页面,可以注释掉在Network中查看文件下载情况
var newImg = document.createElement("img")
newImg.src = load_img[num];
con.appendChild(newImg);
// 每成功下载一张图片num+1,加载进度等于 下载成功图片数量/图片总数(num / all)
num++;
// 对百分比进行向下取整操作
percent = Math.floor(num * 100 / all) + "%"
view.innerHTML = percent;
}
</script>
</body>
</html>

打开浏览器Network查看文件下载情况
移动端之强大的预加载 - 叶落非殇 - 叶落非殇
 还找什么插件,预加载不求人,自己写吧!进度条是不是变得so easy了?
  评论这张
 
阅读(83)| 评论(3)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017