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 相关文章推荐
为Yahoo! UI Extensions Grid增加内置的可编辑器
Mar 10 Javascript
单击浏览器右上角的X关闭窗口弹出提示的小例子
Jun 12 Javascript
基于jquery ui的alert,confirm方案(支持换肤)
Apr 03 Javascript
原生javascript实现解析XML文档与字符串
Mar 01 Javascript
JavaScript中数组去除重复的三种方法
Apr 22 Javascript
基于vuejs实现一个todolist项目
Apr 11 Javascript
深入理解vuex2.0 之 modules
Nov 20 Javascript
谈谈JS中的!!
Dec 07 Javascript
微信小程序 扭蛋抽奖机css3动画实现详解
Jul 19 Javascript
js实现带箭头的进度流程
Mar 26 Javascript
微信小程序单选框自定义赋值
May 26 Javascript
vue完美实现el-table列宽自适应
May 08 Vue.js
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
动态表单验证的操作方法和TP框架里面的ajax表单验证
2017/07/19 PHP
一次因composer错误使用引发的问题与解决
2019/03/06 PHP
Yii 框架使用Forms操作详解
2020/05/18 PHP
使用jquery.qrcode生成彩色二维码实例
2014/08/08 Javascript
jQuery实现模拟marquee标签效果
2015/07/14 Javascript
Javascript基础_简单比较undefined和null 值
2016/06/14 Javascript
JS实现简单的右下角弹出提示窗口完整实例
2016/06/21 Javascript
浅谈jQuery hover(over, out)事件函数
2016/12/03 Javascript
使用gulp搭建本地服务器并实现模拟ajax
2017/04/05 Javascript
Django使用多数据库的方法
2017/09/06 Javascript
gulp教程_从入门到项目中快速上手使用方法
2017/09/14 Javascript
JavaScript相等运算符的九条规则示例详解
2019/10/20 Javascript
Quasar Input:type=&quot;number&quot; 去掉上下小箭头 实现加减按钮样式功能
2020/04/09 Javascript
JavaScript, select标签元素左右移动功能实现
2020/05/14 Javascript
[02:44]DOTA2英雄基础教程 魅惑魔女
2014/01/07 DOTA
12步入门Python中的decorator装饰器使用方法
2016/06/20 Python
计算机二级python学习教程(3) python语言基本数据类型
2019/05/16 Python
python爬虫中多线程的使用详解
2019/09/23 Python
python:目标检测模型预测准确度计算方式(基于IoU)
2020/01/18 Python
基于Python快速处理PDF表格数据
2020/06/03 Python
利用python爬取有道词典的方法
2020/12/08 Python
css3 按钮 利用css3实现超酷下载按钮
2013/03/18 HTML / CSS
CSS超出文本指定宽度用省略号代替和文本不换行
2016/05/05 HTML / CSS
中国最大的潮流商品购物网站:YOHO!BUY有货
2017/01/07 全球购物
柏林通行证:Berlin Pass
2018/04/11 全球购物
简单介绍Object类的功能、常用方法
2013/10/02 面试题
数据库设计的包括哪两种,请分别进行说明
2016/07/15 面试题
会计专业毕业自荐书范文
2014/02/08 职场文书
学校感恩教育活动总结
2014/07/07 职场文书
向雷锋同志学习倡议书
2015/04/27 职场文书
2016年小学“感恩教师”主题队日活动总结
2016/04/01 职场文书
餐厅开业活动方案
2019/07/08 职场文书
2022年四月新番
2022/03/15 日漫
深入理解 Golang 的字符串
2022/05/04 Golang
redis protocol通信协议及使用详解
2022/07/15 Redis
JavaScript实现简单的音乐播放器
2022/08/14 Javascript