一起详析“图片预加载”

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

原文发布于微信公众号 - HTML5学堂(h5course-com)

原文发表时间:2016-04-11

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏JetpropelledSnake

Vue学习笔记之Vue组件

vue的核心基础就是组件的使用,玩好了组件才能将前面学的基础更好的运用起来。组件的使用更使我们的项目解耦合。更加符合vue的设计思想MVVM。

571
来自专栏应兆康的专栏

面向新手(有一定编程基础): 一图入门 Python 基础

有编程基础的同学可以借助此图30分钟入门Python最基本语法,不喜勿喷。喜欢可以收藏, 看不清楚可以右键保存图片查看。

1543
来自专栏GIS讲堂

Arcgis for Js之鼠标经过显示对象名的实现

在浏览地图时,移动鼠标经过某个对象或者POI的时候,能够提示该对象的名称对用户来说是很实用的,本文讲述在Arcgis for Js中,用两种不同的方式来实现该效...

992
来自专栏HTML5学堂

HTML知识复习

HTML5学堂:本篇文章主要是从头到尾串一下HTML4.0的知识点。很多知识在网站各个文章中都已经讲解过了,在这里就不再重复书写了。学习时,知识点固然重要,但是...

2854
来自专栏极客编程

前端的对决:React的JSX与Vue的templates

React.js和Vue.js是这个星球上最流行的JavaScript库。它们都很强大,相对来说很容易获取和使用。

982
来自专栏前端小叙

css绝对定位如何在不同分辨率下的电脑正常显示定位位置?

有时候我们在写页面中,会发现绝对定位的父级元素已经相对定位了,但是在不同分辨率的电脑下,绝对定位还是会错乱,似乎父级的相对定位并没有起了作用。 首先要明白如下几...

3787
来自专栏代码GG之家

android MVVM开发模式(二)

举手之劳,帮忙分享出去,让更多热爱编程的人加入进来。 简介 之前讲了那么多,主要围绕着这个核心概念:绑定。 不过相对来说,我们上节讲的其实只是它的一个知识点:解...

1907
来自专栏进击的君君的前端之路

jQuery

1063
来自专栏花叔的专栏

解读,小程序显示关注公众号的组件是有条件的

以免同学们过分解读,进而增加往后跟大家讨论需求时的沟通成本,这里稍微解读一下“扫码打开小程序新增公众号关注组件”的功能。

513
来自专栏JetpropelledSnake

Vue学习笔记之表单绑定输入

单向绑定非常简单,就是把Model绑定到View,当我们用JavaScript代码更新Model时,View就会自动更新。

441

扫码关注云+社区