解析预加载显示图片艺术


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事件列表解说
Dec 22 Javascript
JavaScript 继承详解(三)
Jul 13 Javascript
用Javascript 获取页面元素的位置的代码
Sep 25 Javascript
收集的10个免费的jQuery相册
Feb 26 Javascript
Bootstrap实现带暂停功能的轮播组件(推荐)
Nov 25 Javascript
如何编写一个d.ts文件的步骤详解
Apr 13 Javascript
js实现动态增加文件域表单功能
Oct 22 Javascript
JS实现的冒泡排序,快速排序,插入排序算法示例
Mar 02 Javascript
微信小程序如何刷新当前界面的实现方法
Jun 07 Javascript
vue 解决路由只变化参数页面组件不更新问题
Nov 05 Javascript
JS实现简易留言板增删功能
Feb 08 Javascript
js中延迟加载和预加载的具体使用
Jan 14 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查看session内容的函数
2008/08/27 PHP
php中判断数组是一维,二维,还是多维的解决方法
2013/05/04 PHP
php使用指定字符列表生成随机字符串的方法
2015/04/18 PHP
PHP/HTML混写的四种方式总结
2017/02/27 PHP
php实现的统计字数函数定义与使用示例
2017/07/26 PHP
不错的一个日期输入 动态
2006/11/06 Javascript
求解开jscript.encode代码的asp函数
2007/02/28 Javascript
javascript实现的在当前窗口中漂浮框的代码
2010/03/15 Javascript
jQuery下通过$.browser来判断浏览器.
2011/04/05 Javascript
精心挑选的15个jQuery下拉菜单制作教程
2012/06/15 Javascript
js将字符串转成正则表达式的实现方法
2013/11/13 Javascript
利用js实现前台动态添加文本框,后台获取文本框内容(示例代码)
2013/11/25 Javascript
setInterval与clearInterval的使用示例代码
2014/01/28 Javascript
js生成动态表格并为每个单元格添加单击事件的方法
2014/04/14 Javascript
Javascript中For In语句用法实例
2015/05/14 Javascript
JS遍历对象属性的方法示例
2017/01/10 Javascript
Node.js如何对SQLite的async/await封装详解
2019/02/14 Javascript
浅谈Webpack多页应用HMR卡住问题
2019/04/24 Javascript
Nuxt页面级缓存的实现
2020/03/09 Javascript
浅谈在vue-cli3项目中解决动态引入图片img404的问题
2020/08/04 Javascript
[01:07:21]NAVI vs VG Supermajor 败者组 BO3 第二场 6.5
2018/06/06 DOTA
在 Django/Flask 开发服务器上使用 HTTPS
2014/07/03 Python
python 利用pandas将arff文件转csv文件的方法
2019/02/12 Python
对IPython交互模式下的退出方法详解
2019/02/16 Python
pygame实现俄罗斯方块游戏(基础篇1)
2019/10/29 Python
python库skimage给灰度图像染色的方法示例
2020/04/27 Python
python飞机大战游戏实例讲解
2020/12/04 Python
Python 实现RSA加解密文本文件
2020/12/30 Python
CSS3 flex布局之快速实现BorderLayout布局
2015/12/03 HTML / CSS
Html5 Canvas动画基础碰撞检测的实现
2018/12/06 HTML / CSS
Giglio俄罗斯奢侈品购物网:男士、女士、儿童高级时装
2018/07/27 全球购物
应用心理学个人求职信范文
2013/12/11 职场文书
高中军训第一天感言
2014/03/06 职场文书
煤矿班组长竞聘书
2014/03/31 职场文书
毕业实习证明(4篇)
2014/10/28 职场文书
浅谈redis整数集为什么不能降级
2021/07/25 Redis