解析预加载显示图片艺术


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 相关文章推荐
JQuery 实现的页面滚动时浮动窗口控件
Jul 10 Javascript
jquery拖动插件(jquery.drag)使用介绍
Jun 18 Javascript
jQuery取得select选择的文本与值的示例
Dec 09 Javascript
js 阻止子元素响应父元素的onmouseout事件具体实现
Dec 23 Javascript
jquery中添加属性和删除属性
Jun 03 Javascript
javascript随机显示背景图片的方法
Jun 18 Javascript
JavaScript获取各大浏览器信息图示
Nov 20 Javascript
Vuejs第十一篇组件之slot内容分发实例详解
Sep 09 Javascript
jquery获取easyui日期控件的值实现方法
Nov 09 Javascript
推荐三款日期选择插件(My97DatePicker、jquery.datepicker、Mobiscroll)
Apr 21 jQuery
vue checkbox 全选 数据的绑定及获取和计算方法
Feb 09 Javascript
微信小程序工具函数封装
Oct 28 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-perl哈希算法实现(times33哈希算法)
2013/12/30 PHP
PHP使用imagick读取PDF生成png缩略图的两种方法
2014/03/20 PHP
Yii2使用小技巧之通过 Composer 添加 FontAwesome 字体资源
2014/06/22 PHP
PHP IDE phpstorm 常用快捷键
2015/05/18 PHP
PHP+Mysql+jQuery实现发布微博程序 php篇
2015/10/15 PHP
PHP中使用jQuery+Ajax实现分页查询多功能操作(示例讲解)
2017/09/17 PHP
laravel Model 执行事务的实现
2019/10/10 PHP
php 的多进程操作实践案例分析
2020/02/28 PHP
Javascript-Mozilla和IE中的一个函数直接量的问题
2007/01/09 Javascript
仅img元素创建后不添加到文档中会执行onload事件的解决方法
2011/07/31 Javascript
Jquery实现仿新浪微博获取文本框能输入的字数代码
2013/02/22 Javascript
javascript中setInterval的用法
2015/07/19 Javascript
基于jquery实现百度新闻导航菜单滑动动画
2016/03/15 Javascript
AngularJS 中的Promise --- $q服务详解
2016/09/14 Javascript
概述VUE2.0不可忽视的很多变化
2016/09/25 Javascript
AngularJS实现Input格式化的方法
2016/11/07 Javascript
浅析script标签中的defer与async属性
2016/11/30 Javascript
jquery实现瀑布流效果 jquery下拉加载新数据
2016/12/12 Javascript
JavaScript闭包的简单应用
2017/09/01 Javascript
bootstrap中日历范围选择插件daterangepicker的使用详解
2018/04/17 Javascript
vue的全局变量和全局拦截请求器的示例代码
2018/09/13 Javascript
记一次vue去除#问题处理经过小结
2019/01/24 Javascript
微信小程序事件流原理解析
2019/11/27 Javascript
Vue 路由间跳转和新开窗口的方式(query、params)
2019/12/25 Javascript
使用Node.js实现base64和png文件相互转换的方法
2020/03/11 Javascript
Python爬虫框架Scrapy安装使用步骤
2014/04/01 Python
python利用lxml读写xml格式的文件
2017/08/10 Python
Python之读取TXT文件的方法小结
2018/04/27 Python
python使用selenium爬虫知乎的方法示例
2020/10/28 Python
Matplotlib animation模块实现动态图
2021/02/25 Python
高中政治教学反思
2014/01/18 职场文书
贷款委托书怎么写
2014/08/02 职场文书
医院领导班子四风问题对照检查材料
2014/10/26 职场文书
学习党章的体会
2014/11/07 职场文书
2015年个人招商工作总结
2015/04/25 职场文书
《卖火柴的小女孩》教学反思
2016/02/19 职场文书