javascript图片预加载实例分析


Posted in Javascript onJuly 16, 2015

本文实例讲述了javascript图片预加载的方法。分享给大家供大家参考。具体如下:

lightbox类效果为了让图片居中显示而使用预加载,需要等待完全加载完毕才能显示,体验不佳(如filick相册的全屏效果)。javascript无法获取img文件头数据,真的是这样吗?本文通过一个巧妙的方法让javascript获取它。

这是大部分人使用预加载获取图片大小的例子:

var imgLoad = function (url, callback) {
  var img = new Image();
  img.src = url;
  if (img.complete) {
    callback(img.width, img.height);
  } else {
    img.onload = function () {
      callback(img.width, img.height);
      img.onload = null;
    };
  };
};

JavaScript代码:

// 更新:
// 05.27: 1、保证回调执行顺序:error > ready > load;2、回调函数this指向img本身
// 04-02: 1、增加图片完全加载后的回调 2、提高性能
/**
 * 图片头数据加载就绪事件 - 更快获取图片尺寸
 * @version 2011.05.27
 * <a href="http://my.oschina.net/arthor" class="referer" target="_blank">@author</a> TangBin
 * <a href="http://my.oschina.net/see" class="referer" target="_blank">@see</a>   http://www.planeart.cn/?p=1121
 * @param  {String}  图片路径
 * @param  {Function} 尺寸就绪
 * @param  {Function} 加载完毕 (可选)
 * @param  {Function} 加载错误 (可选)
 * @example imgReady('http://www.google.com.hk/intl/zh-CN/images/logo_cn.png', function () {
    alert('size ready: width=' + this.width + '; height=' + this.height);
  });
 */
var imgReady = (function () {
  var list = [], intervalId = null,
  // 用来执行队列
  tick = function () {
    var i = 0;
    for (; i < list.length; i++) {
      list[i].end ? list.splice(i--, 1) : list[i]();
    };
    !list.length && stop();
  },
  // 停止所有定时器队列
  stop = function () {
    clearInterval(intervalId);
    intervalId = null;
  };
  return function (url, ready, load, error) {
    var onready, width, height, newWidth, newHeight,
      img = new Image();
    img.src = url;
    // 如果图片被缓存,则直接返回缓存数据
    if (img.complete) {
      ready.call(img);
      load && load.call(img);
      return;
    };
    width = img.width;
    height = img.height;
    // 加载错误后的事件
    img.onerror = function () {
      error && error.call(img);
      onready.end = true;
      img = img.onload = img.onerror = null;
    };
    // 图片尺寸就绪
    onready = function () {
      newWidth = img.width;
      newHeight = img.height;
      if (newWidth !== width || newHeight !== height ||
        // 如果图片已经在其他地方加载可使用面积检测
        newWidth * newHeight > 1024
      ) {
        ready.call(img);
        onready.end = true;
      };
    };
    onready();
    // 完全加载完毕的事件
    img.onload = function () {
      // onload在定时器时间差范围内可能比onready快
      // 这里进行检查并保证onready优先执行
      !onready.end && onready();
      load && load.call(img);
      // IE gif动画会循环执行onload,置空onload即可
      img = img.onload = img.onerror = null;
    };
    // 加入队列中定期执行
    if (!onready.end) {
      list.push(onready);
      // 无论何时只允许出现一个定时器,减少浏览器性能损耗
      if (intervalId === null) intervalId = setInterval(tick, 40);
    };
  };
})();

调用例子:

imgReady('http://www.google.com.hk/intl/zh-CN/images/logo_cn.png', function () {
  alert('size ready: width=' + this.width + '; height=' + this.height);
});

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
一个加载js文件的小脚本
Jun 28 Javascript
jQuery ajax中使用confirm,确认是否删除的简单实例
Jun 17 Javascript
jQuery深拷贝Json对象简单示例
Jul 06 Javascript
AngularJS入门教程之 XMLHttpRequest实例讲解
Jul 27 Javascript
AngularJS入门教程之ng-checked 指令详解
Aug 01 Javascript
AngularJS入门教程之ng-class 指令用法
Aug 01 Javascript
12 款 JS 代码测试必备工具(翻译)
Dec 13 Javascript
JavaScript 中的 this 简单规则
Sep 19 Javascript
Vue 组件参数校验与非props特性的方法
Feb 12 Javascript
layui radio点击事件实现input显示和隐藏的例子
Sep 02 Javascript
javascript设计模式之装饰者模式
Jan 30 Javascript
vue 二维码长按保存和复制内容操作
Sep 22 Javascript
javascript的BOM汇总
Jul 16 #Javascript
.NET微信公众号开发之创建自定义菜单
Jul 16 #Javascript
初识Javascript小结
Jul 16 #Javascript
浅谈javascript中的DOM方法
Jul 16 #Javascript
详细分析JavaScript函数定义
Jul 16 #Javascript
jQuery时间轴插件使用详解
Jul 16 #Javascript
jQuery实现定时读取分析xml文件的方法
Jul 16 #Javascript
You might like
php防注入,表单提交值转义的实现详解
2013/06/10 PHP
Discuz不使用插件实现简单的打赏功能
2019/03/21 PHP
Javascript 函数对象的多重身份
2009/06/28 Javascript
json 入门基础教程 推荐
2009/10/31 Javascript
jquery 图片轮换效果
2010/07/29 Javascript
js实现广告漂浮效果的小例子
2013/07/02 Javascript
js添加select下默认的option的value和text的方法
2014/10/19 Javascript
node.js中的console.log方法使用说明
2014/12/09 Javascript
ExtJs动态生成treepanel的Json格式
2015/07/19 Javascript
JavaScript与Java正则表达式写法的区别介绍
2017/08/15 Javascript
JS实现点击发送验证码 xx秒后重新发送功能
2019/07/30 Javascript
使用layui 的layedit定义自己的toolbar方法
2019/09/18 Javascript
JavaScript实现简单进度条效果
2020/03/25 Javascript
vue-socket.io接收不到数据问题的解决方法
2020/05/13 Javascript
[05:02]2014DOTA2 TI中国区预选赛精彩TOPPLAY第三弹
2014/06/25 DOTA
[54:24]Optic vs TNC 2018国际邀请赛小组赛BO2 第二场
2018/08/18 DOTA
python实现在windows服务中新建进程的方法
2015/06/30 Python
python开发之list操作实例分析
2016/02/22 Python
Python时间戳使用和相互转换详解
2017/12/11 Python
python 实现得到当前时间偏移day天后的日期方法
2018/12/31 Python
python lambda表达式在sort函数中的使用详解
2019/08/28 Python
python-sys.stdout作为默认函数参数的实现
2020/02/21 Python
使用 Python 在京东上抢口罩的思路详解
2020/02/27 Python
解决Django部署设置Debug=False时xadmin后台管理系统样式丢失
2020/04/07 Python
django模板获取list中指定索引的值方式
2020/05/14 Python
python进度条显示-tqmd模块的实现示例
2020/08/23 Python
连卡佛中国官网:Lane Crawford中文站
2018/01/27 全球购物
编码转换,怎样实现将GB2312编码的字符串转换为ISO-8859-1编码的字符串
2014/01/07 面试题
EJB需直接实现它的业务接口或Home接口吗,请简述理由
2016/11/23 面试题
感恩小明星事迹材料
2014/05/23 职场文书
2014企业领导班子四风对照检查材料思想汇报
2014/09/17 职场文书
法律意见书范文
2015/06/04 职场文书
2015年国庆节寄语
2015/08/17 职场文书
装修安全责任协议书
2016/03/22 职场文书
如何给HttpServletRequest增加消息头
2021/06/30 Java/Android
Redis集群的关闭与重启操作
2021/07/07 Redis