解析预加载显示图片艺术


Posted in Javascript onDecember 05, 2016

一般情况下网页中的图片都是随文档流依次加载的,什么时候用到则什么时候加载,但是有些时候这样的加载方式往往会影响用户体验,比如鼠标hover变换背景图片的时候,只有鼠标移入才会对变换的图片进行加载,这样就可能会出现片刻的加载空白现象;又比如图片显示后隐藏再显示网站内容等也是同样的道理。

为了在必要的时候增加用户体验,提高网页的交互逼格,这里不得不介绍下图片预加载的艺术啦。

那么什么是图片预加载呢?

道理很简单啦,虽然某些图片一时半会我用不到,但是为了避免使用时出现的措手不及的现象,我还是乖乖把它们先准备好,在某些时候悄悄的把它们加载进来,以防一时之需。

ok,那么怎么才能实现这样的功能呢?

其实很简单啦,

这里呢就介绍一个jquery库的preLoadImages()函数,使用这个函数呢就可以轻松实现图片预加载了,下面来一睹为快吧,代码如下:

$(function(){
  var cache=[];
  //编写一个预加载图片的jQuery函数
  $.preLoadImages = function(){
    //获取函数体的参数个数
    var args_len = arguments.length;
    //反向循环参数个数,创建img元素
    for(var i = args_len ; i--;) {
      var cacheImage = document.createElement(‘img');
      //指定img元素的src属性为数组元素的值
      cacheImge.src = arguments[i];
      //将HTML元素加入到数组中
      cache.push(cacheImage);
    }  
  }  
});

ok,注释都写的十分清楚了吧,还是没看懂?好吧那么我们先不管代码了,其实只要通过下面一步就可以完成函数的调用,如下:

//预加载图片
 $.preLoadImages('images/sample1.jpg','images/sample2.jpg','images/sample3.jpg');

其中的

'images/sample1.jpg','images/sample2.jpg','images/sample3.jpg'

就是图片的路径,预加载多张图片就用逗号分隔啦,

这样在网页上的任何位置引用图片时,将从缓存中获取所需的图片,从而提升用户的体验,使网站获得更好的流畅性哦。

那么还没完,有人可能会问万一图片路径失效加载出错了咋办?

呵呵,再教你一招,出错就出错了呗,我们有plan B,针对出错的图片显示另一张我们事先准备好的图片,用这张图片来替换所有无法显示的图片,那么怎样才能做到呢,方法也十分简单,代码如下:

$(function(){
  $("img").error(function(){
     $(this).prop("src","images/planB.jpg");
  });
});

搞定,这下我们做的万无一失了,

这里主要介绍下error()事件,它的定义和用法为:

当元素遇到错误(没有正确载入)时,发生 error 事件。

error() 方法触发 error 事件,或规定当发生 error 事件时运行的函数。

很好理解吧,至此我们的图片预加载的方法就介绍完了。

本文部分代码及写作思路参考于《超实用的JQuery代码段》一书,欢迎大家积极尝试、评论及指正。

以上就是本文的全部内容,希望对大家有所帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
Javascript-Mozilla和IE中的一个函数直接量的问题分析
Aug 12 Javascript
javascript 关于# 和 void的区别分析
Oct 26 Javascript
基于jquery的网页SELECT下拉框美化代码
Oct 28 Javascript
javascript jscroll模拟html元素滚动条
Dec 18 Javascript
js中匿名函数的创建与调用方法分析
Dec 19 Javascript
js创建对象的方式总结
Jan 10 Javascript
使用jquery 简单实现下拉菜单
Jan 14 Javascript
jquery心形点赞关注效果的简单实现
Nov 14 Javascript
详解React开发必不可少的eslint配置
Feb 05 Javascript
ES6 中可以提升幸福度的小功能
Aug 06 Javascript
vue 移动端适配方案详解
Nov 15 Javascript
使用taro开发微信小程序遇到的坑总结
Apr 08 Javascript
JS限定手机版中图片大小随分辨率自动调整的方法
Dec 05 #Javascript
简单几步实现返回顶部效果
Dec 05 #Javascript
jQGrid Table操作列中点击【操作】按钮弹出按钮层的实现代码
Dec 05 #Javascript
jquery删除数组中重复元素
Dec 05 #Javascript
jQuery动态增减行的实例代码解析(推荐)
Dec 05 #Javascript
DOM 事件的深入浅出(二)
Dec 05 #Javascript
vue.js指令v-model实现方法
Dec 05 #Javascript
You might like
PHP面向对象分析设计的经验原则
2008/09/20 PHP
php 实现进制转换(二进制、八进制、十六进制)互相转换实现代码
2010/10/22 PHP
php 文件上传类代码
2011/08/06 PHP
用PHP来计算某个目录大小的方法
2014/04/01 PHP
JavaScript中的Window窗口对象
2008/01/16 Javascript
对JavaScript的eval()中使用函数的进一步讨论
2008/07/26 Javascript
javascript实现div浮动在网页最顶上并带关闭按钮效果实例
2013/08/13 Javascript
js中call与apply的用法小结
2013/12/28 Javascript
jquery easyui使用心得
2014/07/07 Javascript
js仿QQ中对联系人向左滑动、滑出删除按钮的操作
2016/04/07 Javascript
JS无缝滚动效果实现方法分析
2016/12/21 Javascript
JavaScript字符串检索字符的方法
2017/06/23 Javascript
node实现的爬虫功能示例
2018/05/04 Javascript
Vue 框架之动态绑定 css 样式实例分析
2018/11/14 Javascript
小程序实现搜索框
2020/06/19 Javascript
Webpack设置环境变量的一些误区详解
2019/12/19 Javascript
javascript设计模式 ? 组合模式原理与应用实例分析
2020/04/14 Javascript
[02:01]大师之路——DOTA2完美大师赛11月论剑上海
2017/11/06 DOTA
[50:34]VGJ.T vs Fnatic 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
[00:56]PWL开团时刻DAY8——追追追追追!
2020/11/09 DOTA
Python Property属性的2种用法
2015/06/21 Python
对python中的os.getpid()和os.fork()函数详解
2019/08/08 Python
关于tf.nn.dynamic_rnn返回值详解
2020/01/20 Python
PyQt5中多线程模块QThread使用方法的实现
2020/01/31 Python
pycharm远程连接vagrant虚拟机中mariadb数据库
2020/06/05 Python
python名片管理系统开发
2020/06/18 Python
JD Sports西班牙:英国领先的运动服装公司
2020/01/06 全球购物
物业管理毕业生的自我评价
2014/02/17 职场文书
2014年政风行风评议工作总结
2014/10/21 职场文书
师范生小学见习总结
2015/06/23 职场文书
教师节祝酒词
2015/08/11 职场文书
《索溪峪的野》教学反思
2016/02/19 职场文书
导游词之无锡唐城
2019/12/12 职场文书
详细总结Python常见的安全问题
2021/05/21 Python
Java 数组内置函数toArray详解
2021/06/28 Java/Android
Elasticsearch 索引操作和增删改查
2022/04/19 Python