一起详析“图片预加载”
HTML5学堂:2014年年初的时候,曾经在自己的博客“独行冰海”里写过关于图片预加载和懒加载的博文,当时的文章当中没有写什么关于预载的代码范例,当前打算把预载和懒载分开,讲解的再详细一些。本文主要讲解了图片预载是什么,为何使用预加载,使用预加载的好处以及具体的代码实现。
图片预加载是什么
让浏览区先显示其他的图片(一般使用LOGO)给浏览者看,等图片加载完了之后,再将图片显示。
还有一种更为常见的预载,就是我们随处可见的loading条~~~在我们等待着loading条走完时,内容已经开始加载了~!
为何要用图片预加载
提前加载图片,当用户需要查看时可直接从本地缓存中渲染、可能因为图片很大,浏览器显示出它会用很长的时间,这样浏览者可能以为图片预览慢而没兴趣浏览,把网页关掉,这时,就需要图片预加载。
图片预加载的好处,在于有良好的用户体验。图片预加载主要针对非icon类的图片。
图片预加载的基本原理(即实现方法)
实现预载的方法可以用CSS(background)、JS(Image)。最常用的是JS方法中的new Image();
方法1 使用CSS中的background
设置如下样式: #preload_1 { background: url(要加载图片的名称.png) no-repeat -9999px -9999px; }
之后,将选择器应用到HTML元素中,我们便可通过CSS的background属性将图片预加载到屏幕外的背景上。只要这些图片的路径保持不变,当它们在WEB页面的其他地方被调用时,浏览器就会在渲染过程中使用预加载(缓存)的图片。简单、高效,不需要任何JavaScript。
使用该方法加载图片会存在一定的问题:由于CSS是同页面的其他内容一起加载,这也就意味着增加了页面的整体加载时间。
此处,可以使用JS配合,动态的改变style.background倒是可以让图片加载延迟一些(在加载页面之后)执行。
方法2 JavaScript中的new Image()方法【推荐】
基本步骤:
1 使用new Image()动态的创建img
2 设置其src为要加载的图片,来实现预载。
3 使用onload方法回调预载完成事件(也就是当预载完成之后,执行想要的操作)。
只要浏览器把图片下载到本地,同样的src就会使用缓存,这是最基本也是最实用的预载方法。
另外,当Image下载完图片后,会得到宽和高,因此也可以在预载前得到图片的大小(可以用计时器轮循宽高变化)。
图片预载的代码实现
var loadImg = []; // 创建一个数组,用于存储所有要预加载的图片路径
// 通过push方法,将
loadImg.push('h5course(1).jpg');
loadImg.push('h5course(2).jpg');
loadImg.push('h5course(3).jpg');
loadImg.push('h5course(4).jpg');
loadImg.push('h5course(5).jpg');
loadImg.push('h5course(6).jpg');
loadImg.push('h5course(7).jpg');
loadImg.push('h5course(8).jpg');
var imgsNum = loadImg.length;
var nowNum = 0;
var nowPercentage = 0; // 用于显示加载每一张图片之后,能够给出百分比
// 通过for循环,针对loadImg整个数组进行遍历
for (var i = 0; i < imgsNum; i++) {
// 每一次i变化之后,都需要执行这样的内容 - 创建一个img对象,将img对象的src设置为相应的图片地址
var newImg = new Image();
newImg.src = loadImg[i];
// 每一张图片加载完成之后,都可以执行相应的功能,比如我们在制作loading条时,希望每加载一张图片之后就能够将当前进度显示出来,就可以用这个方法
newImg.onload = function() {
// 一张图片加载完毕之后执行的功能 - 通常是为了控制进度条
nowNum++;
if (nowNum == imgsNum) {
// 加载完成一张图片之后,我们还可以判断是否完成了所有图片的加载,如果完成再执行相应的内容
};
nowPercentage = nowNum / imgsNum * 100;
console.log(nowPercentage + '%');
}
};
关于要说的,利利都已经备注在代码当中了~~~
Tips:注意一点,如果是本地测试,请启动服务器(在wamp当中运行)。
对于wamp不是很了解的,在此简要介绍一下,wamp是服务器集成环境,想要安装以及配置的,可以查看——>wamp的配置与安装。如果您使用微信公众号,想要查看wamp的信息,可以直接发送“wamp”到“HTML5学堂”的微信。
HTML5小编-利利 耗时5h
- 用 PHP 的方式实现的各类算法合集
- Nginx 反向代理解决前后端联调跨域问题
- JavaScript对象length
- Go1.8.4和Go1.9.1版本发布
- Javascript数组操作
- Tensorflow官方语音识别入门教程 | 附Google新语音指令数据集
- jQuery VS JavaScript原生API
- 居于H5的多文件、大文件、多线程上传解决方案
- 抛弃websocket,前端直接打通信道,webRTC搭建音视频聊天
- Golang学习-第三篇 认识Web框架
- Golang学习-第二篇 搭建一个简单的Go Web服务器
- 数据说话:Go语言的Switch和Map性能实测
- Dora.Interception, 为.NET Core度身打造的AOP框架[4]:演示几个典型应用
- Dora.Interception, 为.NET Core度身打造的AOP框架[3]:Interceptor的注册
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- JavaScript 进阶教程(1)--面向对象编程
- Flask架站基础篇(八)--SQLAlchemy(2)
- JavaWeb - EL and JSTL
- Python模拟登陆新版知乎
- 第一天:创建型模式--工厂方法模式
- 第二天:创建型模式--抽象工厂模式
- 第三天:创建型模式--建造者模式
- JavaScript 进阶教程(2)---面向对象实战之贪吃蛇小游戏
- python api链接数据库
- MySQL 的可重复读
- 第四天:创建型模式--原型模式
- Ubuntu16升级Python3
- JavaScript 进阶教程(3)---让你彻底搞懂原型链和继承
- 第五天:结构型模式--适配器模式
- 第六天:结构型模式--修饰器模式