解析预加载显示图片艺术


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 instanceof 的使用方法示例介绍
Oct 23 Javascript
JQUERY dialog的用法详细解析
Dec 19 Javascript
JavaScript数组和循环详解
Apr 27 Javascript
jQuery实现时尚漂亮的弹出式对话框实例
Aug 07 Javascript
js简单实现Select互换数据的方法
Aug 17 Javascript
Javascript的表单验证-提交表单
Mar 18 Javascript
Vue引用第三方datepicker插件无法监听datepicker输入框的值的解决
Jan 27 Javascript
JS实现模糊查询带下拉匹配效果
Jun 21 Javascript
AngularJS ui-router刷新子页面路由的方法
Jul 23 Javascript
详解基于webpack&gettext的前端多语言方案
Jan 29 Javascript
JavaScript实现的弹出遮罩层特效经典示例【基于jQuery】
Jul 10 jQuery
vue 自定义的组件绑定点击事件
Apr 21 Vue.js
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
PHP4 与 MySQL 交互使用
2006/10/09 PHP
PHP中根据IP地址判断城市实现城市切换或跳转代码
2012/09/04 PHP
php将csv文件导入到mysql数据库的方法
2014/12/24 PHP
PHP架构及原理知识点详解
2019/12/22 PHP
jquery 元素相对定位代码
2010/10/15 Javascript
jquery网页回到顶部效果(图标渐隐,自写)
2014/06/16 Javascript
jquery表单验证实例仿Toast提示效果
2017/03/03 Javascript
JQuery实现文字无缝滚动效果示例代码(Marquee插件)
2017/03/07 Javascript
js下载文件并修改文件名
2017/05/08 Javascript
vue-router传递参数的几种方式实例详解
2018/11/13 Javascript
ligerUI的ligerDialog关闭刷新的方法
2019/09/27 Javascript
vue实现简单瀑布流布局
2020/05/28 Javascript
微信小程序多列表渲染数据开关互不影响的实现
2020/06/05 Javascript
深入解析微信小程序开发中遇到的几个小问题
2020/07/11 Javascript
JavaScript动态生成表格的示例
2020/11/02 Javascript
[05:29]2014DOTA2国际邀请赛 赛后专访:LGDNewbee顺利过关
2014/07/13 DOTA
用Python代码来解图片迷宫的方法整理
2015/04/02 Python
浅谈Python中数据解析
2015/05/05 Python
使用python实现rsa算法代码
2016/02/17 Python
python爬虫的工作原理
2017/03/05 Python
python爬虫 使用真实浏览器打开网页的两种方法总结
2018/04/21 Python
解决django同步数据库的时候app models表没有成功创建的问题
2019/08/09 Python
Python动态强类型解释型语言原理解析
2020/03/25 Python
解决python图像处理图像赋值后变为白色的问题
2020/06/04 Python
全方位了解CSS3的Regions扩展
2015/08/07 HTML / CSS
CSS3中的Transition过度与Animation动画属性使用要点
2016/05/20 HTML / CSS
使用PDF.JS插件在HTML中预览PDF文件的方法
2018/08/29 HTML / CSS
请用用Java代码写一个堆栈
2012/01/26 面试题
工程师求职简历的自我评价分享
2013/10/10 职场文书
安全检查验收制度
2014/01/12 职场文书
采购部经理岗位职责
2014/02/10 职场文书
新学期开学演讲稿
2014/05/24 职场文书
护理专业毕业生自荐信
2014/06/15 职场文书
学校法制宣传月活动总结
2014/07/03 职场文书
2015年语言文字工作总结
2015/07/23 职场文书
2016猴年开门红标语口号
2015/12/26 职场文书