通常状况下网页中的图片都是随文档流依次加载的,何时用到则何时加载,可是有些时候这样的加载方式每每会影响用户体验,好比鼠标hover变换背景图片的时候,只有鼠标移入才会对变换的图片进行加载,这样就可能会出现片刻的加载空白现象。javascript
为了在必要的时候增长用户体验,提升网页的交互逼格,这里不得不介绍下图片预加载的艺术。java
那么什么是图片预加载呢?jquery
道理很简单,虽然某些图片一时半会咱们用不到,可是为了不使用时出现的措手不及的现象,咱们仍是须要乖乖地把它们先准备好,在某些时候悄悄地把它们加载进来,以防一时之需。数组
ok,那么怎么才能实现这样的功能?缓存
其实很简单,这里就介绍一个jquery库的preLoadImages()函数,使用这个函数就能够轻松实现图片预加载。代码以下:函数
$(function(){
var cache=[];
//编写一个预加载图片的jQuery函数
$.preLoadImages = function(){
//获取函数体的参数个数
var args_len = arguments.length;
// 循环参数个数,建立img元素
for(var i = 0; i < args_len; i++) {
var cacheImage = document.createElement('img');
//指定img元素的src属性为数组元素的值
cacheImge.src = arguments[i];
//将HTML元素加入到数组中
cache.push(cacheImage);
}
}
});复制代码
只要经过下面一步就能够完成函数的调用,以下:网站
//预加载图片
$.preLoadImages('images/sample1.jpg', 'images/sample2.jpg', 'images/sample3.jpg');复制代码
其中的ui
‘images/sample1.jpg’,‘images/sample2.jpg’,‘images/sample3.jpg’this
就是图片的路径,预加载多张图片能够用逗号分隔,spa
这样在网页上的任何位置引用图片时,将从缓存中获取所需的图片,从而提高用户的体验,使网站得到更好的流畅性。
这里还没完,有人可能会问万一图片路径失效加载出错了咋办?
再教你一招,咱们有planB,针对出错的图片显示另外一张咱们事先准备好的图片,用这张图片来替换全部没法显示的图片,方法也十分简单,代码以下:
$(function(){
$("img").error(function(){
$(this).prop("src","images/planB.jpg");
});
});复制代码
这下咱们作的万无一失了,这里主要介绍下error()事件,它的定义和用法为:
当元素遇到错误(没有正确载入)时,发生 error 事件。
error() 方法触发 error 事件,或规定当发生 error 事件时运行的函数。
至此咱们简单的图片预加载的方法就介绍完了。
这里咱们须要区分图片预加载和懒加载的区别。二者的行为是相反的,一个是提早加载,一个是迟缓甚至不加载。
本文首发于个人博客:www.cnblogs.com/luozhihao,部分代码及写做思路参考于《超实用的jQuery代码段》一书。