解析预加载显示图片艺术


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 相关文章推荐
DOM精简教程
Oct 03 Javascript
同一个表单 根据要求递交到不同页面的实现方法小结
Aug 05 Javascript
关于IE浏览器以及Firefox下的javascript冒泡事件的响应层级
Oct 14 Javascript
jquery Moblie入门—hello world的示例代码学习
Jan 08 Javascript
js获得当前时区夏令时发生和终止的时间代码
Feb 23 Javascript
JS匿名函数实例分析
Nov 26 Javascript
实例解析angularjs的filter过滤器
Dec 14 Javascript
详解vue-router 2.0 常用基础知识点之导航钩子
May 10 Javascript
js+html5实现半透明遮罩层弹框效果
Aug 24 Javascript
jQuery.extend 与 jQuery.fn.extend的用法及区别实例分析
Jul 25 jQuery
vue 移动端记录页面浏览位置的方法
Mar 11 Javascript
JavaScript/TypeScript 实现并发请求控制的示例代码
Jan 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最常用的2种设计模式工厂模式和单例模式介绍
2012/08/14 PHP
php数组合并与拆分实例分析
2015/06/12 PHP
PHP的Laravel框架结合MySQL与Redis数据库的使用部署
2016/03/21 PHP
Yii配置与使用memcached缓存的方法
2016/07/13 PHP
PHP基于pdo的数据库操作类【可支持mysql、sqlserver及oracle】
2018/05/21 PHP
js 判断浏览器类型 去全角、半角空格 自动关闭当前窗口
2009/04/10 Javascript
json中换行符的处理方法示例介绍
2014/06/10 Javascript
jQuery中before()方法用法实例
2014/12/25 Javascript
使用命令对象代替switch语句的写法示例
2015/02/28 Javascript
使用jquery清空、复位整个输入域
2015/04/02 Javascript
解析JavaScript中的字符串类型与字符编码支持
2016/06/24 Javascript
Web性能优化系列 10个提升JavaScript性能的技巧
2016/09/27 Javascript
通过BootStrap-select插件 js jQuery控制select属性变化
2017/01/03 Javascript
简单实现AngularJS轮播图效果
2020/04/10 Javascript
详解nodejs微信公众号开发——4.自动回复各种消息
2017/04/11 NodeJs
jQuery+ajax实现修改密码验证功能实例详解
2017/07/06 jQuery
jQuery实现动态添加节点与遍历节点功能示例
2017/11/09 jQuery
纯JS开发baguetteBox.js响应式画廊插件
2020/06/28 Javascript
mapboxgl区划标签避让不遮盖实现的代码详解
2020/07/01 Javascript
JS实现按比例缩小图片宽高
2020/08/24 Javascript
Python实现PS滤镜中马赛克效果示例
2018/01/20 Python
TensorFlow模型保存/载入的两种方法
2018/03/08 Python
用Python实现读写锁的示例代码
2018/11/05 Python
基于Python打造账号共享浏览器功能
2019/05/30 Python
python使用writerows写csv文件产生多余空行的处理方法
2019/08/01 Python
python爬虫之遍历单个域名
2019/11/20 Python
python词云库wordcloud的使用方法与实例详解
2020/02/17 Python
Python使用struct处理二进制(pack和unpack用法)
2020/11/12 Python
python3爬虫中引用Queue的实例讲解
2020/11/24 Python
纯HTML5+CSS3制作生日蛋糕代码
2016/11/16 HTML / CSS
使用canvas来完成线性渐变和径向渐变的功能的方法示例
2019/07/25 HTML / CSS
纽约海:Sea New York
2018/11/04 全球购物
澳大利亚家居用品零售商:Harris Scarfe
2020/10/10 全球购物
银行员工职业规划范文
2014/01/21 职场文书
简单的个人租房协议书范本
2014/11/26 职场文书
python爬虫之利用selenium模块自动登录CSDN
2021/04/22 Python