解析预加载显示图片艺术


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嵌套函数及闭包
Nov 09 Javascript
javascript 折半查找字符在数组中的位置(有序列表)
Dec 09 Javascript
Python脚本后台运行的几种方式
Mar 09 Javascript
JavaScript中使用Callback控制流程介绍
Mar 16 Javascript
简单实现jQuery进度条轮播实例代码
Jun 20 Javascript
基于jQuery实现歌词滚动版音乐播放器的代码
Sep 17 Javascript
JS+CSS实现网页加载中的动画效果
Oct 27 Javascript
浅谈微信页面入口文件被缓存解决方案
Sep 29 Javascript
vue+axios 前端实现登录拦截的两种方式(路由拦截、http拦截)
Oct 24 Javascript
微信小程序实现页面浮动导航
Jan 28 Javascript
Vue实现滑动拼图验证码功能
Sep 15 Javascript
es6数组includes()用法实例分析
Apr 18 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购物车模块功能分析(函数讲解,附源码)
2013/06/25 PHP
使用YUI+Ant 实现JS CSS压缩
2014/09/02 PHP
php中base64_decode与base64_encode加密解密函数实例
2014/11/24 PHP
php+ajax制作无刷新留言板
2015/10/27 PHP
PHP5.3新特性小结
2016/02/14 PHP
详解PHP处理密码的几种方式
2016/11/30 PHP
php设计模式之代理模式分析【星际争霸游戏案例】
2020/03/23 PHP
教您去掉ie网页加载进度条的方法
2010/12/09 Javascript
js控制容器隐藏出现防止样式变化的两种方法
2014/04/25 Javascript
JS产生随机数的几个用法详解
2016/06/22 Javascript
javascript 数据存储的常用函数总结
2017/06/01 Javascript
NodeJS 实现手机短信验证模块阿里大于功能
2017/06/19 NodeJs
Vue使用vux-ui自定义表单验证遇到的问题及解决方法
2018/05/10 Javascript
JavaScript实现学生在线做题计时器功能
2018/12/05 Javascript
Vue项目环境搭建详细总结
2019/09/26 Javascript
JavaScript实现移动端带transition动画的轮播效果
2020/03/24 Javascript
Vue用mixin合并重复代码的实现
2020/11/27 Vue.js
详解Python中的Descriptor描述符类
2016/06/14 Python
Python单元测试实例详解
2018/05/25 Python
python在html中插入简单的代码并加上时间戳的方法
2018/10/16 Python
Python Selenium 之关闭窗口close与quit的方法
2019/02/13 Python
python如何解析配置文件并应用到项目中
2019/06/27 Python
Python函数中参数是传递值还是引用详解
2019/07/02 Python
python opencv 图像边框(填充)添加及图像混合的实现方法(末尾实现类似幻灯片渐变的效果)
2020/03/09 Python
python使用多线程+socket实现端口扫描
2020/05/28 Python
python如何实时获取tcpdump输出
2020/09/16 Python
美国儿童运动鞋和服装零售商:Kids Foot Locker
2017/08/05 全球购物
软件测试有哪些?什么是配置项?
2012/02/12 面试题
毕业生求职简历的自我评价
2013/10/07 职场文书
清明节网上祭英烈活动总结
2014/04/30 职场文书
宪法宣传周工作方案
2014/05/26 职场文书
贫困证明书格式及范文
2014/10/15 职场文书
幼师小班个人总结
2015/02/12 职场文书
学期个人自我总结
2015/02/13 职场文书
python opencv将多个图放在一个窗口的实例详解
2022/02/28 Python
python的netCDF4批量处理NC格式文件的操作方法
2022/03/21 Python