解析预加载显示图片艺术


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之编码规范 推荐
May 23 Javascript
40个新鲜出炉的jQuery 插件和免费教程[上]
Jul 24 Javascript
固定背景实现的背景滚动特效示例分享
May 19 Javascript
JS获取URL中的参数数据
Dec 05 Javascript
Ajax中解析Json的两种方法对比分析
Jun 25 Javascript
jQuery定义插件的方法
Dec 18 Javascript
Vue实现双向数据绑定
May 03 Javascript
Node.js 进程平滑离场剖析小结
Jan 24 Javascript
深入了解JavaScript 的 WebAssembly
Jun 15 Javascript
jQuery内容选择器与表单选择器实例分析
Jun 28 jQuery
微信小程序swiper使用网络图片不显示问题解决
Dec 13 Javascript
如何利用 JS 脚本实现网页全自动秒杀抢购功能
Oct 12 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短网址和数字之间相互转换的方法
2015/03/13 PHP
PHP学习笔记(一):基本语法之标记、空白、和注释
2015/04/17 PHP
PHP使用preg_split和explode分割textarea存放内容的方法分析
2017/07/03 PHP
laravel-admin解决表单select联动时,编辑默认没选上的问题
2019/09/30 PHP
js给onclick赋值传参数的两种方法
2013/11/25 Javascript
JavaScript设计模式之工厂方法模式介绍
2014/12/28 Javascript
使用jQueryMobile实现滑动翻页效果的方法
2015/02/04 Javascript
javascript实现unicode与ASCII相互转换的方法
2015/12/10 Javascript
详解AngularJS过滤器的使用
2016/03/11 Javascript
你知道setTimeout是如何运行的吗?
2016/08/16 Javascript
Vuejs第十二篇之动态组件全面解析
2016/09/09 Javascript
require.js+vue开发微信上传图片组件
2016/10/27 Javascript
Bootstrap CSS组件之输入框组
2016/12/17 Javascript
Vue动画事件详解及过渡动画实例
2019/02/09 Javascript
Vue infinite update loop的问题解决
2019/04/23 Javascript
javascript获取元素的计算样式
2019/05/24 Javascript
基于原生JS封装的Modal对话框插件的示例代码
2020/09/09 Javascript
vue+Element-ui前端实现分页效果
2020/11/15 Javascript
[06:07]DOTA2-DPC中国联赛3月5日Recap集锦
2021/03/11 DOTA
简介Python中用于处理字符串的center()方法
2015/05/18 Python
Python编写登陆接口的方法
2017/07/10 Python
利用标准库fractions模块让Python支持分数类型的方法详解
2017/08/11 Python
pandas DataFrame实现几列数据合并成为新的一列方法
2018/06/08 Python
深入浅析python变量加逗号,的含义
2020/02/22 Python
python实现文件分片上传的接口自动化
2020/11/19 Python
Sam’s Club山姆会员商店:沃尔玛旗下高端会员制商店
2017/01/16 全球购物
英国奢侈品概念店:Base Blu
2019/05/16 全球购物
如何掌握自荐信格式呢
2013/11/19 职场文书
五一手机促销方案
2014/03/08 职场文书
2014乡镇党政班子四风问题思想汇报
2014/09/14 职场文书
2014年驾驶员工作总结
2014/11/18 职场文书
排球赛新闻稿
2015/07/17 职场文书
大学生创业计划书
2019/06/24 职场文书
导游词之云南省玉龙雪山
2019/12/19 职场文书
关于windows server 2012 DC 环境 重启后蓝屏代码:0xc00002e2的问题
2022/05/25 Servers
Python使用pyecharts控件绘制图表
2022/06/05 Python